Hi
I am working on the teacozy project, and I am bit stuck in how to push a down my div container containing “Locations”. I do have other issues, that I will resolve, but on this one I am struggling.
at the moment I have this:
my code is:
<div class="middle-content">
<div class="centered-text">
<h2>Tea of the Month</h2>
<p>What´s Steeping at The Tea Cozy?</p>
</div>
<div class="tea-products">
<figure>
<img class="tea-items" src="/images/img-berryblitz.webp" alt="fall">
<figcaption><h4>Fall Berry Blitz Tea</h4></figcaption>
</figure>
<figure>
<img class="tea-items" src="/images/img-spiced-rum.webp" alt="spiced">
<figcaption><h4>Spiced Rum Tea</h4></figcaption>
</figure>
<figure>
<img class="tea-items" src="/images/img-donut.webp" alt="donuts">
<figcaption><h4>Seasonal Donuts</h4></figcaption>
</figure>
<figure>
</figure>
<img class="tea-items" src="/images/img-myrtle-ave.webp" alt="ave">
<figcaption><h4>Myrtle Ave Tea</h4></figcaption>
</figure>
<figure>
<img class="tea-items" src="/images/img-bedford-bizarre.webp" alt="bedford">
<figcaption><h4>Bedford Bizarre tea</h4></figcaption>
</figure>
</div>
</div>
<div class="middle-content2">
<div class="centered-text">
<h2>Locations</h2>
</div>
<div class="locations">
<div class="location-items"></div>
<div class="location-items"></div>
<div class="location-items"></div>
</div>
</div>
and my CSS is:
.middle-content2 {
width: 1200px;
height: 500px;
margin: 0 auto;
margin-top: 40px;
text-align: center;
border: 1px solid #ff0000;
}
any hints in overcaming this issue