Hi guys and gals,
I'm in the process of developing a responsive website and have run into something which I was not expecting. I have all my margins and padding set to 0 (or at least I thought I did). However, when I place anything into the header, it automatically pushes whitespace on to the top. In other words, when I add the unordered list below, several pixels of white show up all the way across the top of the browser.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="head">
<nav>
<ul>
<li>Philosophy</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- / HEADER -->
<section class="philosophy"></section>
<!-- / PHILOSOPHY -->
<section class="services"></section>
<!-- / SERVICES -->
<section class="pricing"></section>
<!-- / PRICING -->
<section class="contact"></section>
<!-- / CONTACT -->
<footer class="foot"></footer>
</div>
</body>
</html>
And here is my CSS:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
}
.container {
background-color: rgb(0, 0 ,0);
width: 100%;
margin: 0 auto;
padding: 0;
}
.head {
background: rgb(0, 255, 0);
width: 100%;
height: 25em;
margin: 0;
padding: 0;
}
.head p {
margin: 0;
padding: 1em;
}
.philosophy {
background: gray;
width: 100%;
height: 25em;
}
.services {
background: blue;
width: 100%;
height: 25em;
}
.pricing {
background: green;
width: 100%;
height: 25em;
}
.contact {
background: yellow;
width: 100%;
height: 25em;
}
.foot {
background: red;
width: 100%;
height: 25em;
}
Any help would be greatly appreciated.
