Как убрать поля при использовании начальной загрузки

Question

У меня возникают проблемы при попытке разместить на одной строке, когда мой экран на полную ширину. Col 4 продолжает позиционироваться под Col 1.

      <div class="products">
            <div class="container">
              <div class="row">
                <h2>Products</h2>
                  <div class="col-sm-3">
                <div id="cat-1">
                  <p>1</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-2">
                  <p>2</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-3">
                  <p>3</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-4">
                  <p>4</p>
                </div>
              </div>

          </div>
        </div>
      </div>

Answer 1

Заголовок уничтожает макет. Только столбцы могут быть использованы в качестве дочернего элемента .row.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="products">
   <div class="container">
      <div class="row">
          <div class="col-sm-12">
              <h2>Products</h2>
          </div>
      </div>
      <div class="row">
         <div class="col-sm-3">
            <div id="cat-1">
               <p>1</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-2">
               <p>2</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-3">
               <p>3</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-4">
               <p>4</p>
            </div>
         </div>
      </div>
   </div>
</div>