Hey everyone here's a picture of the problem:
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%;
}
These two rules should do it:
html, body {
margin:0;
padding:0;
}
h1 {
margin:0;
}
jsFiddle example
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With