Section on top of another section

1

Section contacts on top of section text about us ... Why? I've tried everything, margins, paddings, I can not use z-index because the sections can not have position relative or absolute ...

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>
    
asked by anonymous 07.05.2018 / 16:16

1 answer

0

Ok, I discovered the error, the error was in the size of the image that was causing the text to be out of the section and the lack of margin-bottom and margin-top in the section property in general. >     

07.05.2018 / 16:35