body{
	background-color: #ffdfe0;
	text-align: center;
}

.d1{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

<div class="top_bar">
<p class="p1"><img src="haruna.gif" alt="はるな会ロゴ" width="800" height="123"></p>
<ul class="kk">
<li class="green">地域活動支援センター
<p><a href="haruna.html">はるな共同作業所</a></p>
<p><a href="marisu.html">共同作業所マリス発寒</a></p>
<p><a href="tiikikatudousiennsennta.html">地域活動支援センターとは</a></p>
<p><a href="nyuusyononagare.html">入所までの流れ</a></p>
</li>
<li class="pink">就労継続支援B型
<p><a href="hanndo.html">はんど＆はんど</a></p>
<p><a href="syuurousienn.html">就労継続支援とは</a></p>
<p><a href="nyuusyononagare.html">入所までの流れ</a></p></li>
<li class="red">就労支援
<p><a href="gakkitenn.html">喫茶こぐま楽気店</a></p>
<p><a href="toufu.html">手作りとうふ工房豆の生活</a></p>
<p><a href="hanndo.html">クリーニング取次店はんど＆はんど</a></p>
</li>
<li class="blue">他の支援活動
<p><a href="gakkitenn.html">喫茶店内接客係</a></p>
<p><a href="hanndo.html">クリーニング受付</a></p>
<p><a href="toufu.html">とうふ作り・販売</a></p>
<p><a href="gakkitenn.html">清掃</a></p>
<p><a href="">クロネコヤマトメール便</a></p>
<p><a href="">菊地商店リサイクル事業</a></p>
</li>
<li class="purple">共同住居
<p><a href="kuro-ba.html">手稲クローバーハウス</a></p>
<p><a href="poraris.html">ポラリス手稲</a></p>
<p><a href="abchouse.html">西区ABCハウス</a></p>
<p><a href="kogumahouse.html">こぐまハウス</a></p>
<p><a href="mokuteki.html">共同住居の目的</a></p>
</li>
</ul>
</div>

************************************
.top_bar{
	margin-left: auto;
	margin-right: auto;
	width: 800px;


}

.top_bar .p1{
	margin: 0px;
	padding: 0px;
}

.top_bar ul{
	position: relative;
	top: 0px;
	left: 0px;
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	height: 30px;
}

.top_bar li{
	list-style-type: none;
	float: left;
	text-align: center;
	width: 158px;
	background-color: #d2e2ff;
	font-weight: bold;
	border: 2px solid #ffa9b1;
	line-height: 1;
	margin: 0px;
	padding: 17px 0px 0px 0px;
}

.top_bar li a:link{
	color:#0b15ff;
}
.top_bar li a:visited{
	color: #fff023;
}
.top_bar li a:hover{
	color: #ff0412;
}

.green{
	position: absolute;
	top: 0px;
	left: 0px;

}
.pink{
	position: absolute;
	top: 0px;
	left: 160px;
}
.red{
	position: absolute;
	top: 0px;
	left: 320px;

}
.blue{
	position: absolute;
	top: 0px;
	left:480px ;
}
.purple{
	position: absolute;
	top: 0px;
	left: 640px;
}


address{
	border: 3px solid #ff0910;
	width:450px;
	height: 200px;
	margin-left: 250px;

}
.p2{
	float: left;
	margin: 1px;

	height: 200px;
	width: 200px;
}
.p3{
	font-size: 16px;
	padding: 50px 0px;
	margin: 0px;
}
.h2ha{
	background-image: url("はるな画像/niji.png");
	background-color: #ff40e7;
}
.d2{
	font-weight: bold;
}
.p4{
	text-align:center;
}