CODEWITHSUNDEEP
htmlcss
Alana Stephens
Alana Stephens

Reputation: 119

HTML Background color not filling whole page?

Hey everyone here's a picture of the problem:

enter image description here

I want it to fill the the whitespace on the left right and top of the green box.

HTML: 

<!DOCTYPE HTML>
<html>
    <head>
        <LINK href="style.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
        <title>Test page</title>
    </head>
    <body>
    <div id="container" name="header">
        <h1>Blegh</h1>
            <style>
                #container {font-family: 'Montserrat', sans-serif;}
            </style>
     </div>
    </body>
</html>

CSS:

#container{
    background-color: #58FA58;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 100px;
    width: 100%;
}

Upvotes: 8

Views: 40096

Answers (6)

Mahdi Salehian
Mahdi Salehian

Reputation: 140

that's because of browsers. default of browsers has margin and padding and you should set padding and margin to zero in all of your projects

body{
    margin: 0px;
    padding: 0px;
}

Upvotes: 4

Nino Mirza Mušić
Nino Mirza Mušić

Reputation: 150

you set div heigt to 100 px :)

to make div like boddy wraper you shlud have this CSS

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

#container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;
}

.footer, .push {
    height: 20px;
}

Upvotes: 4

StephenCollins
StephenCollins

Reputation: 805

Applying a margin and padding of 0 will allow all of your elements to reach the borders of the page. But if you want the color to fill the entire page, which seems to be the actual question, apply your background-color to the body tag.

body {
    margin: 0px;
    padding: 0px;
    background-color: #58FA58;
}

Upvotes: 0

simmer
simmer

Reputation: 2711

Add this to your style.css:

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

Upvotes: 0

Jesse
Jesse

Reputation: 1459

You have to remove the body margins. Add this to your css:

body {
    margin: 0px;
    padding: 0px;
}

Upvotes: 0

j08691
j08691

Reputation: 207861

These two rules should do it:

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

jsFiddle example

Upvotes: 6

Related Questions