HTML / CSS / Überschriften nicht gleich!

[hauli95]

Hallo zusammen!

ich habe folgendes Problem..Was muss ich tun, damit die beiden Überschriften gleich zentriert sind?

<style>
body {font-family: Tahoma;
font-size: 10pt;
#top {color:white;}
				
# Host_Details {
background-color: yellow;
width: 49%;
float:left;
}

# Service_Details {
				
background-color: green;
margin-left: 500px;
width: auto;
}
				
</style>

<div id="Host_Details">
	<h1> Host details </h1> 
		<hr>
</div>

<div id="Service_Details">
	<h1> Service details</h1>
		<hr>
</div>

Vielen dank im Vorraus!