не тянется блок с контентом внутри

Question

внутри блока с классом mainad (выделен красным цветом) имеется несколько блоков, которые тянутся на 100% ширины родительского блока, а внутри них - ещё 2 блока с картинкой и названием. С ними всё в порядке, но блок, в котором они лежат (mainad) не тянется. что делать?

https://codepen.io/yakrutpochti/pen/dyogVaO

    <div class="body1">
      <header class="head clearfix">
        <nav class="menu wrap">
          <a href="#" class="buttonmenu1">Home</a>
          <a href="#" class="buttonmenu2">TOP</a>
          <a href="#" class="buttonmenu4">Register</a>
          <a href="#" class="buttonmenu5">Login</a>
        </nav>
      </header>
      <main>
        <div class="mainad clearfix">
          <div class="banads">
            <!-- some ads here -->
          </div>
          <div class="mainCont wrap">
            <div class="twoBlocks">
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
            </div>
            <div class="twoBlocks">
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
            </div>
            <div class="twoBlocks">
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
            </div>
            <div class="twoBlocks">
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
              <div class="content">
                <h1 class="title">дырка</h1>
                <div class="rating"></div>
                <div class="description"></div>
                <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg" alt="" class="image">
              </div>
            </div>
          </div>
        </div>
      </main>

    </div>

    <footer>
      <div class="wrap">

        <div id="logo">
          <a id="logoText" href="#">WEBSITE NAME</a>
        </div>

        <div class="copy_sug">
          <a id="suggest">Any suggestions?</a>
          <span id="copy">&copy Copyright</span>
        </div>

      </div>
    </footer>

    * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body,
html,
.mainad,
main,
.mainCont {
  min-height: 100vh;
} 
body .body1 {
  font-family: "Noto Sans", "Gill Sans", sans-serif;
}

a,
a:visited {
  color: #5c7cfa;
  outline: none !important;
}
a:hover,
a:active {
  color: #1558c4;
  cursor: pointer;
}

body1 {
  background-color: #eceff4;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.clearfix:after {
  content: " ";
  clear: both;
}

/*********************************************/

/*HEADER*/
.head {
  width: 100%;
  min-width: 540px;
  background-color: #0a0c0f;
  float: left;
  color: white;
}
.head .menu a {
  text-decoration: none;
  padding: 1.8em;
  float: left;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.head .menu a:hover {
  background: #1558c4;
  transition: background-color 0.3s ease;
}
/*^^^ HEADER ENDS ^^^*/

/* BODY AND EVERYTHING INSIDE*/
.body1 {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background-color: #eceff4;
  box-shadow: 0 -1px #d8dee9 inset;
}

main .wrap {
  word-wrap: break-word;
}

.mainCont {
  background-color: red;
  display: block;
}

/*content starts*/
.mainCont .twoBlocks {
  width: 100%;
  box-shadow: 0px 0px 2px 2px black;
}

.mainCont .twoBlocks .content {
  padding: 0.1em;
  width: 550px;
  display: block;
  float: left;
  border: 1px solid black;
}
.content .image {
  display: block;
  width: 450px;
  height: 300px;
}
/*content ends*/

/*BODY AND EVERYTHING INSIDE ENDS*/

/*FOOTER STARTS*/
footer {
  position: sticky;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #0a0c0f;
  z-index: 0;
  overflow: hidden;
  height: 200px;
  color: white;
  font-weight: 500;
}
footer .wrap {
  margin-top: 1em;
}
footer a,
footer p,
footer span,
footer a:visited {
  color: white;
}
footer a {
  display: inline-block;
  padding: 5px;
  outline: none;
}
footer #suggest:hover {
  color: white;
  border-bottom: 2px solid #1558c4;
  transition: border 0.1s ease-in;
}
#logo {
  text-transform: uppercase;
  display: block;
  width: 100%;
  margin-top: 0.5em;
  letter-spacing: 0.14em;
  font-size: 4em;
  font-family: "Anton";
}
#logo a:hover,
#logo a {
  transition: color 0.3s ease-in-out;
  text-decoration: none;
}
#logo a:hover {
  color: #ff0000;
}
.copy_sug {
  margin-top: 2em;
  display: block;
}
#copy {
  color: #adadad;
  padding: 5px;
  float: right;
  display: block;
}
/*FOOTER ENDS*/

Answer 1

Это из-за float: left;

Можно исправить такими стилями:

main .wrap::after {
  content: "";
  display: table;
  clear: left
}

Также сработает overflow: hidden; для родительского элемента дети которого содержат float.

Еще один вариант, это добавить div со свойством clear после элементов с float.

БЛОГ НА HUSL

не тянется блок с контентом внутри

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