Next section is appearing above the previous one


#1

Hi for some reason the bottom section i have made in my HTML is appearing above the section before it does anybody have a reason why this could be happening

<!--Products Start-->
    <section>
        <div class="pad-200" style="margin-top: 120px;">
            <h3 class="h3-eyebrow">Lorem Ipsum Dolor</h3>
            <h2>Our Products</h2>
        </div>
        <div class="pad-300">
            <p class="text-indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie sollicitudin malesuada. Quisque et orci neque. Proin ullamcorper sit amet ex ut finibus. Aliquam lacinia non justo or sit amet, consectetur adipiscing elit.</p>
        </div>
        <!--Product 1-->
        <div class="product-section">
            <div class="row">
                <div class="column left" style="text-align: center; padding: 50px;">
                    <img src="/assets/images/product-lincoln-red.svg" alt="" style="margin-bottom: 20px;" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
                    <button class="gray-outline-btn">Read More</button>
                    <button class="gray-inline-btn">Buy Now</button>   
                </div>
                <div class="column right">
                    <div style="margin-top: -50px;">
                        <img src="assets/images/pictures/jez-timms-48940-unsplash.jpg" alt="" width="100%">
                    </div>
                </div>
            </div>
        </div>
        <!--Product 2-->
        <div class="product-section">
            <div class="row">
                <div class="column left" style="text-align: center; padding: 50px;">
                    <img src="/assets/images/product-the-rectory.svg" alt="" style="margin-bottom: 20px;" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
                    <button class="gray-outline-btn">Read More</button>
                    <button class="gray-inline-btn">Buy Now</button>   
                </div>
                <div class="column right">
                    <div style="margin-top: -50px;">
                        <img src="assets/images/pictures/nik-lanus-41808-unsplash.jpg" alt="" width="100%">
                    </div>
                </div>
            </div>
        </div>
        <!--Product 3-->
        <div class="product-section">
            <div class="row">
                <div class="column left" style="text-align: center; padding: 50px;">
                    <img src="/assets/images/product-lincoln-red.svg" alt="" style="margin-bottom: 20px;" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
                    <button class="gray-outline-btn">Read More</button>
                    <button class="gray-inline-btn">Buy Now</button>   
                </div>
                <div class="column right">
                    <div style="margin-top: -50px;">
                        <img src="assets/images/pictures/markus-spiske-1050317-unsplash.jpg" alt="" width="100%">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--Products End-->

    <!--Explore Start-->
    <section>
        <div class="explore-section">
            <div class="pad-100">
                <h3 class="h3-eyebrow-alt">Lorem Ipsum Dolor</h3>
                <h2>Explore Around Us</h2>
            </div>
        </div>
    </section>
        <!--Explore End-->

unlisted #2

#3

Hello @joey14

Is this the same problem you posted in your previous post? It is not a good idea to post the same issue twice as it only confuses things…


#4

No this is not the same question


listed #5

#6

Hi joey14,

Your question is not very clear and you need to post the css for the posted html too.

The html indicates you are mixing BS (aka BootStrap) with your own style?


#7

Hi, joey14. Welcome to the forums.

IF you have not done so, please read our posting guidelines.

If you are unable to create a working page that demonstrates the problem, please post a link to the site.


#8

this issue had been solved now thank you for your comments