Flexbox не понимаю почему блок выстраивается за дрругим блоком , а не нже

Question

Даю диву с айди overiew display:flex; после чего все элементы этого дива выстраиваются за дивом main, а не ниже. почему так происходит? p.s первый раз задаю вопрос. если задал его не правильно укажи на ошибки.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Suez+One&display=swap');
*{
  margin:0;
  padding: 0;
  outline: none;
}
body,html{
  width: 100%;
  height: 100%;
}
body{
  background-color: #fafafa;
  font-family: Trebuchet MS, Helvetica;
}

#main{
  padding: 100px 20%;
  width: 60%;
  float: left;
  background-color: #f6f6f6;
  border-top:2px solid silver;
  color: #484848;
  font-size: 1.3em;
}
@media(min-width:1401px){
  #main{
  padding: 100px 20%;
  width: 60%;
  }
}
@media(max-width:1400px){
  #main{
  padding: 100px 10%;
  width: 80%;
  }
}
@media(max-width: 700px){
  #main div{
    width: 98%!important;
  }
}
#main div{
  width: 48%;
  margin-right: 2%;
  float: left;
}
#main h2{font-size: 3em}
#main span{color:#a0a0a0}
#overiew{
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="main">
    <div class="intro">
      <h2>Наши услуги помогут вам!</h2>
      <span>Большой выбор того что поможет вам!</span>
    </div>
    <div class="text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui quasi voluptatum, amet distinctio officiis quasm ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui quasi voluptatum, amet distinctio officiis quas exp expedita ipsam officia quam deserunt eveniet commodi sit accusantium facere illo laborum culpa, incidunt!</span>
    </div>
  </div>

  <div id="overiew">
    <h2>Преимущества</h2>
    <h4>С Нами проще</h4>
    <div class="img">
      <img src="cat1.jpg"alt="qweqwe">
      <span>Изучение Ruby для начинающих</span>
    </div>
    <div class="img">
      <img src="cat2.jpg"alt="">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Praesentium, adipisci?</span>
    </div>
    <div class="img">
      <img src="cat3.jpg"alt="">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit!</span>
    </div>
    <div class="img">
      <img src="cat4.jpg"alt="">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</span>
    </div>
  </div>
</body>
</html>

Answer 1

Просто убери float

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Suez+One&display=swap');
*{
  margin:0;
  padding: 0;
  outline: none;
}
body,html{
  width: 100%;
  height: 100%;
}
body{
  background-color: #fafafa;
  font-family: Trebuchet MS, Helvetica;
}

#main{
  padding: 100px 20%;
  width: 60%;
  background-color: #f6f6f6;
  border-top:2px solid silver;
  color: #484848;
  font-size: 1.3em;
}
@media(min-width:1401px){
  #main{
  padding: 100px 20%;
  width: 60%;
  }
}
@media(max-width:1400px){
  #main{
  padding: 100px 10%;
  width: 80%;
  }
}
@media(max-width: 700px){
  #main div{
    width: 98%!important;
  }
}
#main div{
  width: 48%;
  margin-right: 2%;
}
#main h2{font-size: 3em}
#main span{color:#a0a0a0}
#overiew{
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Porfolio</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="main">
    <div class="intro">
      <h2>Наши услуги помогут вам!</h2>
      <span>Большой выбор того что поможет вам!</span>
    </div>
    <div class="text">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui quasi voluptatum, amet distinctio officiis quasm ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui quasi voluptatum, amet distinctio officiis quas exp expedita ipsam officia quam deserunt eveniet commodi sit accusantium facere illo laborum culpa, incidunt!</span>
    </div>
  </div>

  <div id="overiew">
    <h2>Преимущества</h2>
    <h4>С Нами проще</h4>
    <div class="img">
      <img src="cat1.jpg"alt="qweqwe">
      <span>Изучение Ruby для начинающих</span>
    </div>
    <div class="img">
      <img src="cat2.jpg"alt="">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Praesentium, adipisci?</span>
    </div>
    <div class="img">
      <img src="cat3.jpg"alt="">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit!</span>
    </div>
    <div class="img">
      <img src="cat4.jpg"alt="">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</span>
    </div>
  </div>
</body>
</html>

Answer 2

Нужно выбрать использовать либо float, либо flex. когда ты пишешь #main{float:left;} происходит всплытие этого дива над другими и выравнивание его по левому краю браузера. дивы , которые идут после него начинаю тоже Плыть. лучше использовать flex . поэтому везде, где прописан float:left; это нужно убрать

БЛОГ НА HUSL

Flexbox не понимаю почему блок выстраивается за дрругим блоком , а не нже

Ответы (2 шт):