CODEWITHSUNDEEP
htmlcss
hburn
hburn

Reputation: 13

Why doesn't my nav bar fully stretch to the left in my nav?

Why doesn't my nav bar stretch all the way to the left?

Here is what I am talking about:

Output

My HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css.css" rel="stylesheet" style="text/css">
</head>
<body>
    <div id="main">
        <nav>
            <ul>
                <li><a href="index.html">surfing 101</a></li>
                <li><a href="teknikker.html">teknikker</a></li>
                <li><a href="dønninger.html">dønninger</a></li>
                <li><a href="brettyper.html">brettyper</a></li>
                <li><a href="destinasjoner">destinasjoner</a></li>
                <li><a href="lenker.html">lenker</a></li>
            </ul>
        </nav>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </div>
</body>
</html>

My CSS:

body {
    background-color: #DCDCDC;
}

#main {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

nav {
    margin: 0;
    width: 100%;
    background-color: #FFF;
}

nav ul {
    margin: 0 auto;
}

nav li a {
    background-color: #337656;
    display: block;
    font-size: 1em;
    text-decoration: none;
    color: #FFF;
    padding: 1em;
}

nav li a:visited {
    background-color: #337656;
    display: block;
    font-size: 2em;
    text-decoration: none;
    color: #FFF;
}

nav li a:hover {
    background-color: #2E744D;
}

section {
    background-color: #9999FF;
    float: left;
    width: 100%;
}

li {
    width: 50%;
    list-style-type: none;
    float: left;
    text-align: center;
}

Upvotes: 1

Views: 626

Answers (1)

kunalbhat
kunalbhat

Reputation: 1719

You still have padding applied to your ul. Without a reset or normalize stylesheet, unordered-lists are going to maintain an inherent padding.

nav ul {
  margin: 0 auto;
  padding: 0; /** This will remove the space */
}

Codepen sketch

Upvotes: 6

Related Questions