Code2016 Code2016 - 4 months ago 12
CSS Question

How to get rid of whitespace above div in body

I have this weird whitespace above the section-one div in the body.

Here it is:
enter image description here

Don't understand why, I've even reset the CSS to default i.e

* { margin: 0;}


Html

<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-3.0.0.min.js"></script>

</head>

<body>
<div id='section-one'>
<div id='headline'>
<h1> This is the headline </h1>
<div class='silver-line-break'>
</div>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend>Delivery Fee Calculator</legend>
<span>First name: </span> <input type="text" name="firstname" value="Mickey">
<span>Last name: </span> <input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
</div>
<div class='silver-break-bar'>
<img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
</div>
</div>
</div>
</body>
</html>


CSS

/* Basic Styles */
* {
margin-top: 0px;
padding: 0;
}
body {
padding: 0px;
margin: 0px;
background-color: pink;
}

#section-one {
background-color: #80be05;
margin: 0px;
padding: 0px;
}


Any ideas why there is space between above the
section-one
div in the
body
?

Update: I've added the complete code that asked. Not sure what the problem is? Is the something to do with my chrome browser?

Answer

the H1 has a margin of some pixels.

h1 {
  margin: 0px
}