Full screen width div area

Just use top:0; and left: 0; and you can also eliminate padding: 0. Don't use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.

#top {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color:#000
   top: 0;
   left: 0;
}

Usually this is the body tag having some paddings and/or margins. Try adding:

body {
  padding: 0;
  margin: 0;
}

If this works, you may want to consider using a normalization stylesheet that fixes this type of issue as well as many other related types of issues.

Extended answer...

The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:

Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:

document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);

* {
  box-sizing: border-box; /* not completely needed, yet useful */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex; /* or css grid for more intricate layouts */
  flex-direction: column;
}

#top {
  background-color: LightCoral;
  height: 150px;
  border-bottom: 3px solid Crimson;
}

#pagewrap {
  background-color: LightGreen;
  flex-grow: 1; /* make it stretch to the bottom even if little content */
  overflow-y: scroll; /* optional */
}

<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>

Ensure that body has padding and margin set to 0 in CSS.