CODEWITHSUNDEEP
csshtmlhtml-listsnavigationbar
Richard Friedman
Richard Friedman

Reputation: 237

CSS Eliminate Padding Around Navigation Bar

I'm trying to create a navigation bar at the top of my page that is flush to the top of the page like this http://mightytext.net/ . However, I always end up with some white padding on the top and sides of the page.

How do I get rid of this padding so that the content lines up directly against the top of the page?

Here is my code:

<div id='header'>
<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>


#nav {
width: 100%;
float: left;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
background-color: #3498DB;
}
#nav li {
float: left;
}

Upvotes: 2

Views: 8637

Answers (3)

Astrotim
Astrotim

Reputation: 2172

You most likely need to use a reset style. At a basic level, you can simply add the following rule to the top of your CSS:

* {
  margin: 0;
}

But you'd be better using one of the many CSS reset files, such as HTML5 Reset or normalize.css.

Upvotes: 4

Anton Matyulkov
Anton Matyulkov

Reputation: 722

html, body { margin:0; padding:0 }

A good way to avoid such situation is by using CSS resets, like the one here

Upvotes: 2

Kizuka
Kizuka

Reputation: 25

You can always try using negative pixels!

#nav {
width: 100%;
float: left;
display: block;
margin: -1px;
padding: 0px;
list-style: none;
background-color: #3498DB;
}

Upvotes: 0

Related Questions