I am new to web development so I don't even know how to search for this. My apologies if this has been discussed previously.

I am trying to make a banner (I call it a header in my code) but it is broken.

CSS:

#header
{
border:7px solid #0318e1;
margin:10px;
}

#logo
{
float:left;
width:30%
margin-left:0;
margin-right:0;
}

#sociallinks
{
float:left;
width:30%
margin-left:0;
margin-right:0;
text-align:center;
}

#headerlinks
{
float:left;
width:30%
margin-left:0;
margin-right:0;
text-align:right;
}


HTML:

<div id="header">
<div id="logo">
<a href="http://www.as-ishomes.com"><img src="images/weblogoname.png" alt='"As-Is" Home Buying'/></a>
</div>
<div id="sociallinks">
<h1>Place Holder</h1>
</div>
<div id="headerlinks">
<a href="mailto:info@as-ishomes.com"><h4>Email: info@As-IsHomes.com</h4></a>

<h1>Call: 619-303-3691</h1>

<h3><a href="/index.html">Home</a>&nbsp&nbsp|&nbsp&nbsp
<a href="/aboutus.html">About Us</a>&nbsp&nbsp|&nbsp&nbsp
<a href="/faq.html">FAQ</a>&nbsp&nbsp|&nbsp&nbsp
<a href="/contact.html">Contact Us</a></h3>
</div>
</div>

The divs displayed somewhat properly (the widths were not what I want) when I had mistakenly used 'links' rather than 'headerlinks' in the HTML. When I fixed that, all of the divs were displayed outside of the border (the widths are still not what I want). It displays the same way in Firefox and Safari.

How do I fix this?

Also, I would like to be able to horizontally and vertically center the 'sociallinks' in a way that will display properly if the user resizes the browser. How do I accomplish this?