CSS/HTML: Header Not Touching Top of the Screen

Question

For some reason, though I do have padding: 0; and margin: 0;, the div is always just under the top of the browser, and not touching it.

Here is the code:

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

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
 <ul>
  <li>Home</li>
  <li>About</li>
  <li>Forums</li>
  <li>Contact</li>
 </ul>
</div>

</body>
</html>

I really have no idea what I'm doing wrong. Extra help would be greatly appreciated.

Possible duplicate of [Margin on child element moves parent element](https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) — showdev, Mar 23 '18 at 17:23
Also see [Mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing), [Collapsing Margins](https://www.w3.org/TR/CSS21/box.html#collapsing-margins), and [What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/). — showdev, Mar 23 '18 at 17:29

score 0 · Answer 1 · answered Mar 23 '18 at 17:24

You can solve this problem with adding ul{ margin: 0 }

html,
body {
  margin: 0;
  padding: 0;
}
.nav > ul {
  margin: 0;   /* Try to add this */
}

.nav>ul>li {
  display: inline-block;
  padding: 0px 25px 25px 25px;
  color: #333333;
  font-family: Georgia;
  font-size: 14px;
}

.nav>ul {
  text-align: right;
  list-style: none;
  vertical-align: middle;
  padding: 20px 0px 20px 0px;
}

.nav {
  background-color: #cccccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
 <ul>
  <li>Home</li>
  <li>About</li>
  <li>Forums</li>
  <li>Contact</li>
 </ul>
</div>

</body>
</html>

Please consider explaining why this solves the issue. – showdev Mar 23 '18 at 17:31 — showdev, Mar 23 '18 at 17:31

score 0 · Answer 2 · answered Mar 23 '18 at 17:34

The Cascading Style Sheet takes from the lowest browser-build-in figures.

Chrome has

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

.

So you need to over-ride it.

ul{margin:0}

Then the <style> is taken.

Most high authority got inline-css.

Which is again over-ridden by important! in the <style>.

https://developer.mozilla.org/de/docs/Web/CSS/Cascade

CSS/HTML: Header Not Touching Top of the Screen

2 Answers2