html - section overlaps on another section

Question

I am having a problem with positioning, everything works fine except the last section contactform. The problem is that when I zoom in, the contactform overlaps on services section. Here's the code:

.services {
  width: 100%;
  height: 160vh;
  margin: 100px 0;
  position: relative;
}

.services-content {
  /* position: relative; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-content h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.content-row-one {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
  margin-top: 100px;
}

.row-one {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.project-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 24px;
  margin: 0px 60px;
}

.project-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.quality-assurance {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-assurance h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-three {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-three {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.document-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.document-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.contactform {
  width: 100%;
  height: 50vh;
  position: relative;
}

.contact {
  width: 100%;
  height: 100%;
  text-align: center;
}

.contact h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.contact-content {
  width: 70%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  margin: 0 auto;
  /* position: absolute; */
  margin-top: 50px;
}

.contact-column-one {
  width: 33%;
  height: 50%;
}

.contact-column-one .location i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-one .location i:hover{
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-one h1 {
  font-size: 30px;
}

.contact-column-two {
  width: 33%;
  height: 50%;
}

.contact-column-two .phone i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-two .phone i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-two h1 {
  font-size: 30px;
}

.contact-column-three {
  width: 33%;
  height: 50%;
}

.contact-column-three .email i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-three .email i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-three h1 {
  font-size: 30px;
}

<section class="services" id="services">
        <div class="services-content">
            <h1>OUR SERVICES</h1>
            <div class="content-row-one">
                <div class="row-one">
                    <div class="quality-management">
                        <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="testing-calibration">
                        <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="medical-devices">
                        <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-two">
                <div class="row-two">
                    <div class="lead-auditor">
                        <h6>4. Lead Auditor according to ISO 9001</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="project-management">
                        <h6>5. Project Management</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="quality-assurance">
                        <h6>6. Quality Assurance</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-three">
                <div class="row-three">
                    <div class="document-management">
                        <h6>7. Document Management with SharePoint Server</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="contactform" id="contactform">
            <div class="contact">
                <h1>CONTACT US</h1>
                <div class="contact-content">
                    <div class="contact-column-one">
                        <span class="location">
                            <i class="material-icons">
                                place
                            </i>
                        </span>
                        <h1>ADDRESS</h1>
                        <p>Address</p>
                    </div>
                    <div class="contact-column-two">
                        <span class="phone">
                            <i class="material-icons">
                                phone
                            </i>
                        </span>
                        <h1>PHONE</h1>
                        <p>Phone Number</p>
                    </div>
                    <div class="contact-column-three">
                        <span class="email">
                            <i class="material-icons">
                                email
                            </i>
                        </span>
                        <h1>EMAIL</h1>
                        <p>Email</p>
                    </div>
                </div>
            </div>
        </section>

question from:https://stackoverflow.com/questions/65917689/section-overlaps-on-another-section

Answer 1

While you have a fixed height for .services it will always overlap when the content total height higher than .services height, instead you could use min-height so if the content height less than 160vh the height will remain 160vh but if the content height more than 160vh then .services height will grow corresponding to the content.

.services {
  width: 100%;
  min-height: 160vh;
  margin: 100px 0;
  position: relative;
}

.services-content {
  /* position: relative; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-content h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.content-row-one {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
  margin-top: 100px;
}

.row-one {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.project-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 24px;
  margin: 0px 60px;
}

.project-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.quality-assurance {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-assurance h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-three {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-three {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.document-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.document-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.contactform {
  width: 100%;
  height: 50vh;
  position: relative;
}

.contact {
  width: 100%;
  height: 100%;
  text-align: center;
}

.contact h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.contact-content {
  width: 70%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  margin: 0 auto;
  /* position: absolute; */
  margin-top: 50px;
}

.contact-column-one {
  width: 33%;
  height: 50%;
}

.contact-column-one .location i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-one .location i:hover{
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-one h1 {
  font-size: 30px;
}

.contact-column-two {
  width: 33%;
  height: 50%;
}

.contact-column-two .phone i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-two .phone i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-two h1 {
  font-size: 30px;
}

.contact-column-three {
  width: 33%;
  height: 50%;
}

.contact-column-three .email i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-three .email i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-three h1 {
  font-size: 30px;
}

<section class="services" id="services">
        <div class="services-content">
            <h1>OUR SERVICES</h1>
            <div class="content-row-one">
                <div class="row-one">
                    <div class="quality-management">
                        <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="testing-calibration">
                        <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="medical-devices">
                        <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-two">
                <div class="row-two">
                    <div class="lead-auditor">
                        <h6>4. Lead Auditor according to ISO 9001</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="project-management">
                        <h6>5. Project Management</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="quality-assurance">
                        <h6>6. Quality Assurance</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-three">
                <div class="row-three">
                    <div class="document-management">
                        <h6>7. Document Management with SharePoint Server</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="contactform" id="contactform">
            <div class="contact">
                <h1>CONTACT US</h1>
                <div class="contact-content">
                    <div class="contact-column-one">
                        <span class="location">
                            <i class="material-icons">
                                place
                            </i>
                        </span>
                        <h1>ADDRESS</h1>
                        <p>Address</p>
                    </div>
                    <div class="contact-column-two">
                        <span class="phone">
                            <i class="material-icons">
                                phone
                            </i>
                        </span>
                        <h1>PHONE</h1>
                        <p>Phone Number</p>
                    </div>
                    <div class="contact-column-three">
                        <span class="email">
                            <i class="material-icons">
                                email
                            </i>
                        </span>
                        <h1>EMAIL</h1>
                        <p>Email</p>
                    </div>
                </div>
            </div>
        </section>