Website paragraph box below navigation bar

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;
}