Если вложить row в row появляется отступ справа, как это исправить?

Question

[boris024]

Добрый день. У меня не получается решить проблему на Bootstrap v4. появляется отступ справа и горизонтальная полоса прокрутки Помогите исправить.

<div class="container-fluid">
			<div class="row justify-content-center">
				<div class="col-xl-12 pl-0 pr-0">
					<div class="bg_layer">
						
							
								<h2 class="whyme__title">Заголовок</h2>
							
						
						<div class="row justify-content-center">
							<div class="col-xl-3 col-md-6">
								<i class="fas fa-thumbs-up fa-3x" style="color: white"></i>
								<h3 class="whyme__h3">Заголовок</h3>
								<p class="whyme__text">текс</p>
							</div>
							<div class="col-xl-3 col-md-6">
								<i class="fas fa-percentage fa-3x" style="color: white"></i>
								<h3 class="whyme__h3">Заголовок</h3>
								<p class="whyme__text">текс</p>
							</div>
							<div class="col-xl-3 col-md-6">
								<i class="fas fa-phone fa-3x" style="color: white"></i>
								<h3 class="whyme__h3">Заголовок</h3>
								<p class="whyme__text">текс</p>
							</div>
							<div class="col-xl-12">
								<h2 class="whyme__title">Заголовок</h2>
								<input type="Phone Number" class="block__input" placeholder="Телефон:">
								<button class="button button_full">кнопка</button>
							</div>
						</div>
					</div>
				</div>
			</div>

Отступ появляется именно тогда, когда я вкладываю row в row. Если убрать fluid - то отображается нормально.

Comments

[Владислав Лысков]

Не нужно вкладывать row в row

[boris024]

Владислав Лысков, а как тогда? Если я уберу вложенный row как я смогу выстроить в строку три элемента? они столбцом тогда идут если убрать row.

p.s вложенный row в row нормально работает без fluid. (нет отступа и прокрутки)

Answer 1

[boris024]

Владислав Лысков, Сергей delphinpro, Всем спасибо, проблему решил вложением контейнер в контейнер

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="container">
                <div class="row">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

[Сергей delphinpro]

1.Использовать хелпер no-margin
2. Не вкладывать напрямую row в row. Это неправильно

Всегда можно сделать доп колонку

<div class="row">
  <div class="col-12">
    <div class="row">
    </div>
  </div>
</div>