如何将子div放入父类的填充内？

Question

I am creating columns inside a row using Foundation CSS front-end framework.

<div class="row small-up-2 large-up-3 food-container">
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>

  </div>
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>

  </div>
  <div class="column food-wrap">
    <img src="http://placehold.it/500x500&amp;text=Thumbnail" class="thumbnail">

    <div class="panel food-panel-top">
        <p>Description</p>
    </div>
  </div>

</div>

This is my CSS:

 .column, .columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}


.food-wrap { position: relative; }

.food-wrap > .panel {
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}


.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }

.food-wrap .thumbnail {
    border: medium none;
    box-shadow: none;
}

Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"

Any help is appreciated.

Answer 1

I know the answer to this post now. I still to post the answer so it can help out other developers out there.

The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.