I'm attempting to create a border around this section, as seen in the image. However, I'm unsure of how to move it a few pixels outside of the main box. Here is what I've tried so far, but it's not quite achieving the desired result.
HTML:
<section class="section-steps row outside" id="cities">
<div class="row">
<h2>Our Values</h2>
</div>
<div class="row js--wp-1 our-values-image-container">
<div class="col span-1-of-3 box">
<h3 class="font-weight-bold">Animal Welfare</h3>
<div class="img-background">
<img src="resources/img/animal_welfare.jpg" alt="Animal Welfare">
</div>
</div>
<div class="col span-1-of-3 box">
<h3 class="font-weight-bold">Food Safety</h3>
<div class="img-background">
<img src="resources/img/food_safety.jpg" alt="Food Safety">
</div>
</div>
<div class="col span-1-of-3 box">
<h3 class="font-weight-bold">Sustainability</h3>
<div class="img-background">
<img src="resources/img/Sustainability-S.JPG" alt="Sustainability">
</div>
</div>
</div>
</section>
CSS:
.img-background{
background: #ffd203
}
.our-values-image-container{
padding: 0px 40px;
}
Below is the current output:
[![enter image description here][1]][1]
[![enter image description here][2]][2]