Margin -right разбито по ширине на 100%

У меня есть DIV, содержащий изображение, и второй DIV. Родительский DIV установлен в position: absolute;дочерний DIV установлен в position: relative. Идея состоит в том, что я показываю подпись к своей фотографии поверх своего изображения.

Дочерний DIVдолжен иметь 100%ширину родителя, минус 10pxслева, справа и снизу, плюс черный фон.

.article-container { position: relative; } .photo-caption { ширина: 100%; цвет фона: черный; положение: абсолютное; внизу: 0px; поле справа: 10px; поле слева: 10px; нижняя граница: 10px; }

  
Это текст подзаголовка сверху. 
 

Левое поле выталкивает .photo-captionза пределы .article-container. Правое поле, похоже, не имеет никакого эффекта.

Я также пытался исправить это с помощью box-sizing. Кажется, что ширина .photo-captionуменьшена до родительской ширины, но все еще остается выступ.