Reputation: 311

Remove padding from ul in css

I have a simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.

Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.

Thank you!

CSS

    * {
    border:0;
    margin:0;
}

/* navigation */

#navigation, #episodenav, #pivotnav {
    border-top:3px solid #FFF;
    border-right:1px solid #FFF;
    margin:0 auto;
    list-style:none;    
}


#pivotnav {
    background:#F0F0F0;
    border-top:3px solid #FFF;
    border-right:1px solid #FFF;
    margin:0 auto;
    width:755px;
    height:25px;
    list-style:none;
}

#navigation {
    background:#E0E0E0;
    width:755px;
    height:40px;
}
#episodenav {
    width:756px;
    background:#F0F0F0;
    height:25px;
}
#pivotnav {
    width:755px;
    background:#F0F0F0;
    height:25px;
}

#navigation li, #episodenav li, #pivotnav li {
    border-left:1px solid #FFF;
    float:left;
    list-style:none;
}

#navigation li, #pivotnav li {
    width:150px;
}
#episodenav li {
    width:41px;
}

#navigation a, #episodenav a, #pivotnav a {
    color:#000;
    display:block;
    text-align:center;
}
#navigation a {
    line-height:40px;   
}
#episodenav a, #pivotnav a {
    line-height:25px;
}

/* content */
#content {
    height:auto;
    margin:50px auto;
    position: relative;
    padding:30px;
    width:751px;
    background: white; 
    -moz-box-shadow: 0 0 20px black; 
    -webkit-box-shadow: 0 0 20px black; 
    box-shadow: 0 0 20px black;
    font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
    border-bottom:1px dashed #999;
    font-size:2em;
    padding:25px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
    font-size:1.6em;
    padding:25px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
    font-size:1.1em;
    padding:20px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
    padding: 10px 5px;
    line-height: 21px;
}
#content textarea {
    border: 1px solid #cccccc;
}
#list {
    margin-left: 50px;
}

HTML

    <body>

    <div id="content">

    <div id="navigation">
        <ul>
            <li><i>Ulysses</i> by Episode</a></li>
            <li>Pivot Points</a></li>
            <li>Projects</a></li>
            <li>Collections</a></li>
            <li>About Ashplant</a></li>
        </ul>
    </div>

<h2>TEST</h2>

</div>

</body>
</html>

Upvotes: 2