100% DIV width is not really 100%

add this to css:

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

Then it should work.

Width: 100%, is highly affected by its margin and margin and padding of its parent (body in your case). SO, reset them first

Something like

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

The 100% value is 100% of the parent's width or the view port. See the documentation.

Related