Div-ы складываются, а не расширяются вниз, и это подталкивает мой контент в первом div вверх

#html #css

#HTML #css

Вопрос:

Я студент первого курса и просто работаю над заданием, когда я делаю свои дивы, они, кажется, накладываются друг на друга, я пробовал много разных вещей и смотрел видео на YouTube, но, похоже, ничего не работает, надеясь, что кто-нибудь сможет мне помочь.

 body{
  margin: 0px;
  height: 100%;
}

h1{
  font-family: 'Inter', sans-serif;
  font-size: 1.75em;
}

a:visited{
  color:inherit;
}


.container{
  display: flex;
}
.container-main{
  min-height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
}

.topBar{
  top: 0;
  height: 80px;
  width: 100%;
  background-color: #f2efea;
  position: fixed;
  font-family: 'Inter', sans-serif;
  z-index: 1;
}


.secondNavigation{
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: 80px;
  background-color: #556052;
  padding-bottom: 0;
}

.container-secondary {
  display: flex;
  position: relative;
  width: 100%;
  height: 800px;
  max-height: 800px;
  margin-top: 0;
  margin-left: 0;
  background: url(../images/aboutUS2.svg) no-repeat;
  background-color: none;
  background-size: cover;
  flex-direction: column;
}

.box-1{
  flex: 2;
  background-color: #ffffff;
  opacity: 0.6;
  height: 100px;
  text-align: center;
}

.rudy{
  margin-top: 50px;
  padding-bottom: 20px;
}

.rudyBio{
  font-family: 'Inter', sans-serif;
  line-height: 2;
}

.box-2{
  flex: 1;
  text-align: center;

}

.container-secondary1{
    position: relative;
    display: flex;
    max-height: 800px;
    width: 100%;
    background-color: red;
    margin-top: 450px;
}

 <body>
    <div class="topBar">
      <div class="container">
        <a href="index.html"><img src="images/house.png" alt="logo" class="logo"></a>
        <a href="index.html"><h1 class='homes4Pups'>Homes4Pups</h1></a>
          <h1 class="aboutUs">About Us</h1>
          <h1 class="locations">Locations</h1>
          <a href="contactus.html"><h1 class="contact">Contact</h1></a>
      </div>
    </div>
    <div class="secondNavigation">
      <div class="container">
          <h2 class = 'rehoming helpCentre'>Rehoming</h1>
          <h2 class = 'sponsor helpCentre'>Sponsor Us</h1>
          <h2 class = 'Volunteer helpCentre'>Volunteer</h1>
          <h2 class = 'Covid helpCentre'>Information on COVID</h1>
      </div>
    </div>
  <div class="container-main">
    <div class="container-secondary">
        <div class="box-1">
          <h1 class='rudy'>Meet Rudy</h1>
          <p class='rudyBio'>Lorem ipsum dolor sit amet, consectetur adipisicing elit,Lorem ipsum dolor sit amet, consectetur adipisicing elit,Lorem ipsum dolor sit amet, consectetur adipisicing elit,Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
        </div>
        <div class="box-2">
            <h3 class='darg'>To find out more about DARG press the button below</h3>
            <a href="http://darg.org.za/" target='_blank' class="myButton">DARG</a>
        </div>

    <div class="container-secondary1">
          <div class="container3-box1">
            <h3>news</h3>
          </div>
          <div class="container3-box2">
            <h3>image of dog</h3>
            <img src="images/alfie.svg" alt="fox-terrier" class="fox-terrier">
          </div>
          <div class="container3-box3">
            <h3>image of dog</h3>
          </div>
        </div>
      </div>

  </body>
</html>

Проблема возникает с container-secondary и container-secondary1, когда я меняю высоту container-secondary1 вместо того, чтобы страница становилась длиннее, container-secondary1 перекрывается с container-secondary и выталкивает содержимое вверх.

пример проблемы

1. У вас есть два комментария в вашем css-коде HTML , и **CSS** это кажется странным. Где HTML?

2. @Domink я обновил его, извините, это мой первый раз, когда я использую переполнение стека, и я немного запутался

Ответ №1:

Мне кажется, что вам не хватает закрывающего тега на container-secondary. Или если они вложены, вы пропускаете закрывающий тег на container-main

1. О боже, большое вам спасибо, я нашел это сейчас, я проходил через это в течение 2 часов, пытаясь разобраться, меняя структуру и все остальное, не думал, что это теги, но я каким-то образом, как вы сказали, вложил его, и я переместил закрывающий тег, и теперь он работает. Большое вам огромное спасибо!