尽管在样式表 - CSS中设置为0，但保证金仍然存在

Question

In Chrome when I open up Inspect Element on my webpage, I notice one of the divs has a margin on the right side that fills the rest of the page horizontally:

As far as I know, no right margin should exist on that div. In the stylesheet of the html document, the right margin is set to zero. And, the box model in the Inspect Element window shows a right margin of - :

CSS:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
}

#header {
    /*this is the parent div of the div with the unexpected right margin*/
    width: 100%;
    height: 50px;
    background-color: #26519E;
    box-shadow: 0 5px 5px Lightgray;
}

#logo {
    /*this is the div with the unexpected margin*/
    width: 120px;
    height: inherit;
    margin-left: 180px;
    /*!!!*/
    margin-right: 0;
    padding: 10px;
}

Inspect Element:

What could be causing this right margin on the logo div?

If more information is required to determine what's happening, please tell me.

Answer 1

A block-level element like a div in-flow (A div is a block-level element, not an inline element like a span, img or strong) has an automatic right margin because it (normal div's) want to be 100% of the width of the parent div.

Solutions are float:left (to get it out of flow), display:inline-block (to change its flow-abilities, as mentioned in the comments above, I'm not hogging credit :) ) and flexbox (which is relatively new so I wouldn't recommend jumping in on that just yet).

Also, have a look at bootstrap and its grid system to get better aligning for your website which also scales beautifully to phones and tablets.

Minor addition:

<div id="header">
  <div class="container">
  </div>
</div>
<div id="main">
  <div class="container">
  </div>
</div>

with:

#header,#main {
  width: 100%;
}
#header {
  background: brown;
  height: 3em;
}

.container {
  width: 1000px;
  margin: 0 auto;
  min-height: 20em;
}

creates an easy (but not responsive) centered solution