Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Background color not filling whole page?

Tags:

html

css

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%;
}
like image 439
Alana Stephens Avatar asked Aug 15 '14 15:08

Alana Stephens


2 Answers

These two rules should do it:

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

jsFiddle example

like image 171
j08691 Avatar answered Oct 02 '22 16:10

j08691


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;
}
like image 33
Mahdi Salehian Avatar answered Oct 02 '22 17:10

Mahdi Salehian