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>

    <meta charset="utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">


    <div class="container">
        <header class="head">
        <!-- / 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>


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.

Recommended Answers

Have you tried a css reset


Jump to Post

All 4 Replies

Thank you iamthwee! That is a handy little web app. I appreciate you pointing it out.

Great stuff please mark as solved.

Also, don't forget to include the doctype as well for Internet explorer. But I always use a css reset to ensure the websites have maximum compatibility across browsers.

Will do. Thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.