Цвет фона не заполняет стороны строки / столбца

Question

Я добавил несколько строк и столбцов в раздел на странице, и теперь появилась пустая полоса, в которой не задан цвет фона. У меня есть все строки на странице внутри div с классом container-fluid.Я попытался установить отступы по бокам затронутого участка (с классом about) на 0, на стороне не было применено никакого поля (что помешало бы его заполнению цветом), и я попытался width: 100% -пустое пространство все еще там.Любые идеи относительно того, в чем проблема?

Полный код: CodePen (примечание: удалите цвет из тела в CSS, чтобы увидеть пустое пространство в CodePen)

HTML иззатронутый раздел:

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>..(Removed)..</p>
            </div>
          </div>
        </section>

CSS для раздела:

.about {
  background-color: WhiteSmoke;
}

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
}

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Answer 1

Это потому, что созданная вами сетка не соответствует соглашениям по макету начальной загрузки.Вы должны поместить rows непосредственно в container-fluid.

<div class="container-fluid">
  <section class="row" id="hero">
    <div class="col"></div>
  </section>
  <section class="row" id="about">
    <div class="col"></div>
  </section>
  <section class="row" id="portfolio">
    <div class="col"></div>
  </section>
  <section class="row" id="contact">
    <div class="col"></div>
  </section>
</div>

container-fluid, по умолчанию имеет 15px отступы влево и вправо.

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

row, по умолчанию имеет -15px поля слева и справа.

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

Если вы поместите все строки непосредственно в контейнер-жидкость, у вас не возникнет этой проблемы.

Проверьте code-pen .Я исправил проблему.

---

Вам не нужно это использовать.

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Answer 2

Стиль Bootstrap .container-Fluid добавляет в этот раздел отступы.

Вы можете переопределить его следующим образом:

body .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

Более простое решение, которое не мешает контейнеру-Текучий стиль заключается в том, чтобы просто добавить к вашему телу тот же цвет фона, который вы добавили в каждом разделе, чтобы зазор не был виден:

html body{ background-color: #f5f5f5; }

Вот обновленная версия вашей ручки

https://codepen.io/suth_a/pen/NzNvdM