Почему мой основной контейнер слишком широкий?Просто кол-9 и кол-3

Question

Я создаю страницу с col-3 слева и col-9 справа, с навигацией в col-3 и jumbotron, а также с текстом в col-9, но по какой-то причине страница получается слишком широкой, поэтому для навигации по всей ширине страницы необходима полоса прокрутки.

На самом деле не пробовал ничего, кроме поиска в Google, который не дал результатов.

    <div class = "row">
      <div class = "col-sm-3">

      </div><!--closing of left column-->

  <div class = "col-sm-9">
    <div class = "container">
      <div class = "row">
        <div class = "col-sm-12 text-center">
          <div class = "row text-center">
            <h1>Oregon Tulip Festival</h1>
          </div>
  <div class = "jumbotron img-responsive">
  <div class = "container">
  <div class = "row">
  <div class = "col-sm-12">
  <p class = "jumbo">Sunset at the Tulip Festival</p>
        </div>
    </div>
          </div>
        </div><!--closing of jumbotron-->
<hr>
<h2>Tulip festival | Experience Oregon's finest tulip arrangement</h2>
</div>
    </div><!--closing of small container-->

  </div><!--closing of right column-->
</div>
</div><!--closing of large container-->
</div>```

I have all the divs closed off, so I don't really know how to eliminate the unnecessary width. Could it possibly be my jumbotron?

Answer 1

Вам не нужно использовать контейнер несколько раз для этого макета, попробуйте следующую структуру HTML.Я надеюсь, что эта структура поможет вам.

<div class = "container">
<div class = "row">
    <div class = "col-sm-3">
    </div>
    <div class = "col-sm-9">
        <div class = "row">
            <div class = "col-sm-12 text-center">
                <div class = "row text-center">
                    <h1>Oregon Tulip Festival</h1>
                </div>
                <div class = "jumbotron img-responsive">
                    <div class = "row">
                        <div class = "col-sm-12">
                            <p class = "jumbo">Sunset at the Tulip Festival</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h2>Tulip festival | Experience Oregon's finest tulip arrangement</h2>
            </div>
        </div>
    </div>
</div>