sections in bootstrap colliding with each other-CodePudding

i a have a website done in bootstrap, the url is enter link description here

i am having alignment issues in homepage,most of the sections are colliding with each other, i had to do like below to make those section stop colliding:

<section  id="chinnu1" style="margin-top:80%">
  <div >
    <div >
      <div >
        <h4  style="text-align:center">
          OUR SERVICES
        </h4>
      </div>

to all sections i gave margin-top so that they are not collided, now the issue is after few days again this collision happens and i have to adjust this margin-top again, can anyone please tell me how to fix this permanently

CodePudding user response：

I took a deep look on your website. Your problem is not the margin. It's the owl carousels. Their position is absolute so they goes over other elements

    section.carousel-section .container-fluid {
        overflow: hidden;
        position: absolute;
    }

This should be position:relative;