Can someone assist me with properly scaling my navbar (e.g. min-width 800px) and setting up the phone number div with space between it and the links? This is my first try at this, so any help is greatly appreciated. Thank you.
CSS
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#navbar {
background:#212221 repeat-x;
height:25px;
color:#FFF;
padding:px 0px 0px 20px;
}
#nav {
background:#212221 repeat-x;
width: auto;
float: left;
font-size:14px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-left:500px;
padding: 0;
list-style: none;
min-width:700px;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 3px 10px;
text-decoration: none;
color: #fff;
}
#nav li a:hover {
text-decoration: underline;
color:#FFF;}
#number {
background:#212221 repeat-x;
width: auto;
float:left;
font-size:16px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-top:3px;
margin-left:200px;
padding:0;
list-style: none;
}
#number li {
float: left;
}
#number a {
display: block;
padding: 0px 10px;
text-decoration: none;
color: #fff;
}
#header {
background:#FFF repeat-x;
height:80px;
color:#FFF;
padding:0px 0px 0px 0px;
}
</style>
HTML
<body>
<div id="navbar">
<ul id="nav">
<li><a href="/index.html">HOME</a></li>
<li><a href="/about.html">ABOUT US</a></li>
<li><a href="/gallery.html">GALLERY</a></li>
<li><a href="/faq.html">FAQs</a></li>
<li><a href="/contact.html">CONTACT</a></li>
</ul>
<div id="number">
<a>951-226-5620</a>
</div>
<div class="header">
<img src="images/kingstudlogo.png"/>
</div>
</body>