Push my container div down

Get Help CSS
,
#1

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:

div_container.PNG
div_container.PNG1362×730 149 KB

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

#2

I have used:

position: relative;
    top: 80px;

it went down, but I am not sure is the best option… Please can I have your feedback

#3

That is the way I would have suggested-it works, and, as far as I know that is what it is designed for. Good job on solving it on your own!

#4

This method works well now, but may not work as well on a device with much different dimensions.
Personally I would not recommend using a measurement in pixels if it can be avoided, as this makes it not as responsive. I prefer to use a percentage so that the measure changes when the screen size does.

2 Likes