Margin-right broken on width 100%

Question

I have a DIV containing an image and a second DIV. The parent DIV is set to position: absolute; the child DIV is set to position: relative. The idea is that I display my photo caption on top of my image.

The child DIV should have 100% width of the parent, minus 10px on the left, right and bottom, plus a black background.

The left margin bumps .photo-caption outside the bounds of .article-container. The right margin doesn't seem to have any effect.

I've also tried fixing this with box-sizing. It seems to get the width of .photo-caption down to the parent width but there's still the overhang.

Answer 1

It's better if you remove width:100%. write like this:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }