DIV list links refuse to touch

Question

My links are not Start Class and Center class for my website I am building. I have gone over this several times and can not see what I have done wrong. Can someone please assist me with this?

My html

<DIV class="outline">
<DIV class="navigation">
<ul>
    <li class="orange start"><a href="">Home</a></li>
    <li class="orange center"><a href="">Forum</a></li>
</ul>
</DIV>
</DIV>

My Css class

   /*Start Links*/

    a:link {
        color: #FFFFFF;
        text-decoration: none;
        margin: 0;
    }
    a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:hover {
        color: #FFFFFF;
        text-decoration: none;
    }
    a:active {
        color: #FFFFFF;
        text-decoration: none;
    }
    .navigation  ul li {
        margin: 0px auto;
        display: inline-block;
    }
    /*End Links*/

    /*Start Button*/

    .start {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em 0 0 .5em;
        -moz-border-radius:  .5em 0 0 .5em;
        border-radius: .5em 0 0 .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
        margin: 0px;
    }
    .center {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
        margin: 0;
    }

    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2pxrgba(0,0,0,.2);
    }
    .button:hover {
        text-decoration: none;
    }
    .button:active {
        position: relative;
        top: 1px;
    }
    .orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .orange:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
    /*End Button*/

    /*Start Website*/
    body {
        background-color: #393939;
        color: #FFFFFF;
        padding: 0;
        margin: 0;
    }
    .header {
        display: inline-block;
        width: 100%;
        text-align: left;
        border:solid 2px red;
    }
    .circle {
        float: left;
        width: 100px;
        height:100px;
        display: inline-block;
        background: #FF5A09;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .header h1.first {
        margin-top: 30px;
        margin-left: -92px;
        margin-right: 5px;
        display: inline-block;
        color: #FFFFFF;
    }
    .header h1.last {
        display: inline;
        color: #FF5A09;
    }
    .header .right {
        display: block;
        height: auto;
        float: right;
        padding: 10px 10px 10px 10px;
        border-left: solid 2px red;
    }
    .navigation {
        margin: 0 auto;
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .outline {
        display: block;
        margin: 0 auto;
        width: 980px;
        border: solid 2px red;
    }
    .content {
        display: inline-block;
        width: 60%;
        border: solid 2px red;
        margin: 0 auto;
    }
    .footer {
        display: block;
        width: 100%;
        border: solid 2px red;
        padding: 10px 0 10px 0;
        text-align: center;
    }
    /*End Website*/

    /*Start slider*/

    /*End slider*/

Answer 1

It is because the whitespace between the <li> elements is significant. If you remove all whitespace, the elements will be right next to each other. Either you just do this:

<li class="orange start"><a href="">Home</a></li><li class="orange center"><a href="">Forum</a></li>

Or, if you want to keep the line breaks in code, which I usually think is a good thing, you can insert an HTML comment like this:

<li class="orange start"><a href="">Home</a></li><!--
--><li class="orange center"><a href="">Forum</a></li>

It's a matter of taste, but I tend to favor the latter because I find it more readable.