Содержащие столбцы в строке

Question

Я создал три столбца, которые я хочу содержать внутри строки, которая затем содержится внутри раздела.

По какой-то причине три столбца не будут содержать внутри строки правильно, есть лилучший метод или что-то, что я пропустил в коде, чтобы исправить это?

.column-1-3 {
  width: 29.666%;
  margin-right: 5.5%;
  float: left;
}

.column-last-child {
  margin-right: 0!important;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}

<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3 column-last-child">
      <div class="video-post"></div>
    </div>
  </div>
</div>

Answer 1

Добавьте display: flex; в строку и удалите свойство float из column-1-3:

.column-1-3 {
  width: 30%;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  display: flex;
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
  justify-content: space-between;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}

<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
  </div>
</div>

Вам также не нужно устанавливать margin с flex.Просто держите width: 30% для столбцов и используйте justify-content: space-between; для строк.