CSS: 0px margin not working

Question

I've set the margin for a particular div to 0px on all sides, but when I inspect it in Chrome it still shows a margin. I have no idea why this is happening:

As you can see there is margin: 0px in the CSS and Chrome indicates in the lower right that the element has no margin. However, when I hover over the div there is a large orange region to the right indicating the margin.

Here is my HTML:

        <div id="content">
            <div id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="black_mirror.html">Black Mirror</a></li>
                    <li><a href="hoc.html">House of Cards</a></li>
                    <li><a href="inception.html">Inception</a></li>
                    <li><a href="interstellar.html">Interstellar</a></li>
                    <li><a href="st.html">Stranger Things</a></li>
                </ul>
            </div>

            <div class="home-page-images">
                <img src="images/black_mirror_cover.jpg" class="home-page-image home-page-image-left" />
                <img src="images/hoc_cover.jpg" class="home-page-image home-page-image-right" />
                <div class="clear-float" />
                <img src="images/inception_cover.jpg" class="home-page-image home-page-image-left" />
                <img src="images/interstellar_cover.jpg" class="home-page-image home-page-image-center" />
                <img src="images/st_cover.jpg" class="home-page-image home-page-image-right" />
            </div>

            <div class="clear-float" />
        </div>

Here is some of my CSS:

div.clear-float {
    clear: both;
}

div.home-page-images {
    margin: 0px;
    width: 600px;
}

div#container {
    /* TODO: Vertically center */
    background-color: #aaaaaa;
    color: white;    
    width: 960px;
}

div#nav {
    font-family: 'Playfair Display', serif;
    float: left;
    text-transform: uppercase;
}

div#nav a:hover, div#nav a:active {
    /* color: #FDF9BD; */
}

div#nav a:link, div#nav a:visited {
    /*
    display: block;
    margin: 20px;
    color: #FFFFFF;
    text-decoration: none;
    */
    color: white;
    text-decoration: none;
}

div#nav li {
    margin: 0px 0px 20px 0px;
}

div#nav ul {
    list-style-type: none;
    overflow: hidden;
}

What am I doing incorrectly?

Answer 1

DIVs are block level elements: they'll "take up" all of the horizontal space provided to them by the parent. That means, even if you manually set the width of a div to something less than the width of the parent, it'll still take up all of the horizontal space . If you add a display: inline-block to the div, your "margin" will disappear.

Of course, that may affect the rest of your layout, but that's another problem entirely.

Answer 2

Margin is 0 on each sides!

The empty space is not margin.Its just a space displaying because you have given fixed 600px width to block element.

You are looking box-model layout displaying "-" means its 0 or not set. You have fixed width of element try making it 100% width or removing width it wont show space right side.

Or check in computed tab you will see all the property of margins there.