CODEWITHSUNDEEP
htmlcss
DrEvil
DrEvil

Reputation: 5

Unwanted space around Nav

I am new here and I am also creating my very first site from scratch.

As shown in the image, the nav bar at the top has space above and below it, which I don't want. I have tried removing/adding padding to the .nav ul but it doesn't seem to work.

What part of my HTML/CSS is responsible for this and how can I fix it? Thank you! 

html, body {
    margin: 0;
}

div {
    display: block;
}

.header {
    background-color: #333333;
}

.nav {
    padding:  0;
    margin: 0 auto;
}

.nav ul {
    padding: 20;
}

.nav ul li {
    color: white;
    display: inline-block;
    padding: 20px 30px 20px 10px ;
    font-family: serif;
    font-weight: 200;
}

.second_section .container {
    background-image: url(http://1.bp.blogspot.com/-    I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
    height: 900px;
}

.copy {
    position: absolute;
    margin: 100px 50px 500px 500px;
    color: white;
    font-family: garamond;
}
<div class="header">
    <div class="nav">
        <ul>
            <li>ABOUT</li>
            <li>WORK</li>
            <li>TEAM</li>
            <li>CONTACT</li>
    </div>
</div>

<div class="second_section">
    <div class="container">
        <div class="copy">
            <h1>ACTUATE CONTENT</h1>
            <h3>Expert content for every business</h3>
        </div>
    </div>
</div>

Upvotes: 0

Views: 73

Answers (2)

John Slegers
John Slegers

Reputation: 47081

Solution :

This should do it :

.nav ul {
    margin: 0;
}

See also this Fiddle for a demo.

Notes :

  • The padding: 20; you set for .nav ul won't have any effect, because padding requires a unit to follow your value. You probably want something like padding: 20px; or padding: 1.25em; instead.

  • font-weight: 20; won't have any effect either. Valid values for font-weight are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900.

Upvotes: 1

ketan
ketan

Reputation: 19341

Give following css will remove all default margin and padding which browser taking on top of the css.

* {
    margin: 0;
    padding: 0;
}

Working Fiddle

Upvotes: 1

Related Questions