mardi 21 avril 2015

Margin exists despite being set to 0 in stylesheet - CSS

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:

Notice the right margin extending to the edge of the page

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;
    padding: 10px;
}

Inspect Element:

The HTML layout

The Inspect Element box model

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

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

Aucun commentaire:

Enregistrer un commentaire