Section on top of another section

Question

Section contacts above the text of section about us... Why? I have tried everything, margins, paddings, I cannot use z-index because sections cannot have relative or Absolute position...

HTML:

/* ------------------------------- about us ---------------------- */
    
    .section-about {
        background-color: white;
       position: relative
    }
    
    .image img {
        width: 60%;
        margin: 0 auto;
    }
    
    .long-text p {
        width: 60%;
        line-height: 145%;
        margin: 0 auto;
        text-align: justify;
        
    }
    
    
        /* -------------------------- contacts --------------------------- */
    
    .section-contacts {
        background-color: white;
    }
    
    .contact-form {
        width: 80%;
        margin: 0 auto;
    }
    
    
    .contact-field {
        width: 100%;
        padding: 7px;
        border-radius: 5px;
        border: 2px solid #74C8D2;
        margin-top: 4%;
    }
    
    
    .send-field {
        width: 100%;
        height: 326px;
        padding: 7px;
        border-radius: 5px;
        border: 2px solid #74C8D2;
        margin-top: 4%;
    }
    
    
    #custombtn {
        position: absolute;
        margin: 0 4%;
        width: 30%;
        margin-top: 3.9%;
        color: #fff;
        background-color: #74C8D2;
        padding: 1%;
        border-radius: 5px;
        border: 2px solid transparent;
        cursor: pointer;
    }
    
    #custombtn:hover {
        background-color: #fff;
        color: #74c8d2;
        border: 2px solid #74C8D2;
        transition: all 0.5s ease-in-out;
    }
    
    #customtext {
        text-align: center;
        margin: 0 4%;
        width: 30%;
        position: absolute;
        margin-top: 10%;
    }
    
    
    
    
    *:focus {
        outline: none;
    }

<!--------- SECTION ABOUT ------------>

      <section class="section-about" id="about">
        <div class="row">  
        <h1>ABOUT US</h1>
        </div>
          
        <div class="image">
            <div class="row">
            <img src="img/dummy-640x310-1.jpg" alt="">
            </div>
        </div> 
          
            
        <div class="row">
            <div class="col span-1-of-1">
                <div class="long-text">
            <p>Aenean at lorem non nisi blandit consequat vel sit amet arcu. Proin nec urna commodo, tincidunt metus non, dictum dui. Donec ut dolor ut eros venenatis pellentesque sit amet a elit. Suspendisse congue arcu sed risus tincidunt ullamcorper. In sodales, orci sit amet aliquam ultrices, odio magna commodo risus, non pellentesque ipsum turpis id felis. Sed aliquam quam eu ex aliquam, sed mattis mauris vulputate. Aliquam interdum lorem vitae est volutpat ultrices. Nam mattis dolor id dolor tincidunt, vitae eleifend lorem mollis. Duis aliquet leo diam, ac mollis erat facilisis id. Vestibulum laoreet nisl vel diam laoreet fringilla. </p>
                    </div>
                </div>
        </div>
      </section>

      <!--------- SECTION ABOUT ------------>

      <section class="section-contacts">
        <div class="row">  
        <h1>CONTACT US</h1>
        </div>
          
        
          
          <div class="row">
              <div class="contact-form">
                <!---Primeira Caixa--->
                <div class="col span-1-of-2">
                <form class="" action="" method="post">
                
              <input class="contact-field" type="text" name="" value="" placeholder="NAME">

                
              <input class="contact-field" type="email" name="" value="" placeholder="EMAIL">
                
              <textarea class="contact-field" name="message" rows="8" cols="80" placeholder="YOUR MESSAGE HERE..."></textarea>  
                    
              <button class="btn" type="button" name="button">SEND</button>
                
            </form>
                </div>
                
                <!---Segunda Segunda caixa--->
                <div class="col span-1-of-2">

                    <div class="send-field">
                    <input type="file" id="realfile" hidden="hidden">
                    <button type="button" id="custombtn">Choose a file...</button>
                    <span id="customtext">No files chosen yet.</span>
                    </div>    
                    
                
                <button class="btn" type="button" name="button">SEND</button>
                    
                </div>
                  </div>
            </div>
          
      </section>

Answer 1

Ok, I found the error, the error was in the size of the image that was causing the text to go outside the section and in the absence of margin-bottom and margin-top in the section property in general.