Create a div that occupies a width of 100% of the screen?

Try to add a margin: 0 to this div , and a margin: 0; padding: 0; to body . It would look like this:

 body{
     margin: 0;
     padding: 0;
 }
 .top-bar {
     position: relative;
     width: 100%;
     height: 60px;
     background: #313D4C;
     margin: 0;
 }

However, the ideal would be to apply these styles to all elements, you would achieve this through the% css% selector of css, so:

*{
     margin: 0;
     padding: 0;
 }

Also you could put a * , nicely explained in this article . It would make the size determinations of the elements already take into account margins, spacing, borders, among other things.

Are you using a reset? * {margin: 0; padding: 0; }

It may be the lack of some reset, since browsers have a default margin of 8px.

Or try as block:

.topbar {display: block; width: 100%; height: 60px; }