Why is wrapper div shifting downwards?

Question

Facing a very unique situation. In the following code, ALL the divs are nested inside one large parent .wrapper div. In the .wrapper properties, I have clearly defined the positioning (top/left) as 0px and 0px margin. But it still is shifting a little downwards, resulting in shifting of the entire page contents downwards and hence leaving a blank space on top.

The background color of site is black. You can see the top image holder div (gray) along with other divs shifted slightly downwards.

*{
  box-sizing:border-box;
}

html,body {
  margin: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0,0,0,1);
  padding: 0px;
}

a {
  text-decoration: none;
  color: #FFF;
}

.wrapper {
  height: 725px;
  max-width: 960px;
  margin-left: auto;
  left: 0px;
  top: 0px;
  background-color: rgba(255,0,0,1);
  margin-right: auto;
  position: relative;
  padding: 0px;
}

.topimage {
  width: 100%;
  max-width: 960px;
  height: 100%;
  max-height: 175px;
  background-color: #666;
  position: absolute;
  top: 0px;
  font-size: 36px;
  color: #FFF;
  text-align: center;
  border: thin solid #FFF;
}

.topimage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  border-radius: 15px 15px 0px 0px;
}

.menu {
  background: linear-gradient(#0F1A9B, black 100%);
  height: 100%;
  max-height: 50px;
  max-width: 960px;
  position: relative;
  top: 175px;
}

.list {
  color: rgba(255,255,255,1);
  text-decoration: none;
  margin-right: auto;
  margin-left: auto;
  /* [disabled]background-color: rgba(255,0,0,1); */
  padding: 0px;
  width: auto;
  /* [disabled]position: relative; */
  height: 100%;
  font-family: "MS Serif", "New York", serif;
  font-weight: normal;
  font-size: 18px;
}

.list li {
  display: inline-block;
  margin-right: 0%;
  margin-left: 2.5%;
  width: 10%;
  text-align: center;
  /* [disabled]background-color: rgba(0,51,255,1); */
  position: relative;
  padding: 0px;
  /* [disabled]float: left; */
  line-height: 50px;
  vertical-align: top;
}

.content {
  width: 100%;
  height: 500px;
  background-color: #0F1A9B;
  position: relative;
  top: 175px;
  padding-right: 0.5%;
  padding-left: 0.5%;
}

.leftcontent {
  background-color: rgba(210,238,252,1);
  float: left;
  height: 100%;
  max-height: 500px;
  width: 100%;
  max-width: 85%;
  top: 0px;
  position: relative;
  border-left-color: rgba(205,205,205,1);
  padding-right: 0.5%;
  padding-left: 0.5%;
}

.rightcontent {
  background-color: rgba(51,177,236,1);
  float: right;
  height: 100%;
  max-height: 500px;
  width: 100%;
  max-width: 15%;
  position: relative;
  top: 0px;
  /* [disabled]margin-right: 0.3%; */
}

.footer {
	
}

<div class="wrapper">
  <div class="topimage">
    Top Image
  </div>
  <div class="menu">
    <ul class="list">
      <li><a href="home.html">Home</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="leftcontent">
      <h1>Home page</h1>
    </div>
    <div class="rightcontent">
    </div>
  </div>
</div>

Answer 1

It's margin collapsing:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

In your example, you have .topimage set to absolute position which makes it out of the normal content flow. The default top margin of the sibling ul collapses outside .wrapper.

To fix that, you can either reset the default top margin of the ul:

.list {
  margin-top: 0;
}

Or, add overflow:auto to the parent container div.

.wrapper {
  overflow: auto;
}