How to put Image on top of text with Boostrap

Question

SO I want to reach this image

But i am getting this result, and i have a sense that i misused boostrap for the grid, but i am not sure it has to do with my initial problem

I want to reach a parallax element too by translating the image on the x axis on click as in this gif So i am worried if using margin would make it worse

EDIT: my problem isn't with the grid and text placement, i want to position the trees ( right and left on the right sides) which isn't working at all. I know it is immature to say this but idc of the grid if its work like in the prototype

here is my code

  <section id="abtus"> 
                    
                    <a href="#abtus" ><span class="arrow1 left"></span></a>
                    <div class="col-4" style="margin-bottom: 700px;"><img class="tree" src="./images/tree1.png" width="750"></div>

                     <div class="grid text-center " >
                        <div class="cols-4 pb-3"><p class="text1">WHO WE ARE</p></div>
                        <div class="cols-4 p-1 "><p class="text2">We are two sisters who come from a similar <br>
                            background of love for everything creative and magical.</p> </div>
                        <div class="cols-4 p-1 "> <p class="text2">We aim to deliver your stories with interesting <br>
                    visually pleasing magic that separates you from the rest!</p></div>
                    <div class=" cols-4 p-1 pb-5 "> <p class="text2">To guarantee great quality work and also an added fun <br>
                        element to your project.</p></div>
                        <div class="cols-1"><img src="./images/Group 33.svg"></div>  
                    </div>
                      <div class="grid px-5">
                        <div class="cols-4 offset-md-2"><img src="./images/Group 30.svg" width="90"> </div>
                        <div class=" cols-4 pb-4"></div>
                        <div class=" cols-4 pb-2"></div>
                        <div class=" cols-4"><img src="./images/Group 46.svg" width="150"></div>
                    </div>
                            <div class="grid text-center">
                                <div class="cols-4 pb-3"><p class="text1">THE TEAM</p></div>
                                <div class="cols-4 pb-5"><p class="text2 pb-4">We have a rich experience in the market, especially <br>
                                    in gaming and animation. We work with several tasks <br>
                                    such as visual development, concept art, character design, <br>
                                    graphic design, branding, and social media.<br><br>
                                    Yes, We do everything!</p> </div>
                                    <div class=" cols-4 pb-4"></div>


                                    <div class=" cols-4 text-center"><img src="./images/Group 50.svg" width="120"></div>
                            </div>
                       
                            <a href="#abtus" ><span class="arrow1 "></span></a>
                        
                </section>

the relative css

section{
           
            flex: none;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
            scroll-snap-align: start;
           
            
            

            }
             .tree{
                top: 0;
                left:0;
                
                position:absolute ;
                z-index: 1;
              }
              
            
                
                .text1{
                    text-align: left;
                    left: 0;
                    color:  #20122B;
                    font-family: 'Lato';
                    font-weight: 900;
                    font-size: 30px; 

                }
                .text2{
                    text-align: left;
                    color:  #20122B;
                    font-family: 'Lato';
                    font-weight: 500;
                    font-size: 0.9em; 
                    line-height: 16px;

                }

   .arrow1{
            display: grid;
            place-items: center;
            place-content: center;
            border-left: 3px solid #ffffff;
            border-bottom: 3px solid #ffffff;
            width: 10px;
            height: 10px;
            border-radius: 0.2em;
            transform: rotate(225deg);
        }
         
    .right{
        margin-right: 150px;
        float:left;
       
       
    }
    .left{
        margin-right: 100px;
        float:left;
        transform: rotate(45deg);
    }