Website paragraph box below navigation bar - html

Question

I'm currently writing a website from scratch and I'm having some problems with my css and html. I not sure how to create a space between my navigation bar and my content box.
Here is my html:
http://pastebin.com/cTVCx0gm
and my css:
http://pastebin.com/w61aTmHv
Since I'm a novice programmer, I'm not really sure what I'm doing wrong...
Thanks!

Answer 1

All you need to do is change your "li" class to this:
li
{
display:inline-block;
}
I've created this fiddle here so you can see the output. You can move the center bar left and right to see the behavior.
http://jsfiddle.net/ninja1/ALKPP/

Answer 2

try this
Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
a {
display: block;
width: 150px;
height: 30px;
background-color: #024c68;
text-align: center;
padding: 10px;
font-size: 20px;
display: inline;
}
a:link {
color: #ffffff;
text-decoration: none;
font-family: verdana;
} /* unvisited link */
a:visited {
color: #ffffff;
text-decoration: none;
font-family: verdana;
} /* visited link */
a:hover {
color: #ffffff;
text-decoration: none;
font-family: verdana;
background: #226078;
} /* mouse over link */
a:active {
text-decoration: underline;
text-decoration: none;
font-family: verdana;
} /* selected link */
/*this is the body css*/
body {
background-color: #62b1d0;
}
div.box {
background-color: #99CCFF;
border: 5px solid #99CCFF;
clear: left;
margin: 9px 0 0 0;
padding: 8px 10px;
width: 900px;
}
.clrboth {
clear: both;
}