What is the issue having a different child for rows than col on a bootstrap grid?

Question

Yesterday I was doing a review of our HTML structures and found out we have containers used as row child's like this

<section class="row graySeccion">
  <div class="container py-5 graySeccion">
    <div class="row mb-5">
      <div class="col py-2 text-center">
        <h1>WELCOME TO STEAM SCHOOLS</h1>
      </div>
    </div>

But looking at the oficial documentation I can see this note.

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

How wrong is it that we have this row->container->row, and what things we could be breaking?
Should we start refactoring our HTML structures?

Answer 1

Yes, Ideally you should follow a proper grid layout structure.

row class contains following property:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Due to this property of row horizontal scrollbar occurs on the page for some resolutions. To avoid this we need to follow the official documentation of bootstrap (container->row->col).