CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Kolesnik Vladislav
Kolesnik Vladislav

Reputation: 33

Bootstrap 3.0's row have margin-left 15px and margin-right 15px

<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-2 logo">
        <img src="img/logo.png" alt="Logotype">
      </div>
      <div class="col-lg-7 col-lg-offset-3">
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About</a></li>
          <li class="menu-item"><a href="#">Expertise</a></li>
          <li class="menu-item"><a href="#">Teams</a></li>
          <li class="menu-item"><a href="#">Works</a></li>
          <li class="menu-item"><a href="#">People say</a></li>
          <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row text-center content-wrapper">
    <div class="col-lg-12 content-header">
      <h1 class="title">We Are Awesome Creative Agency</h1>
      <p class="description-header">
        This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus
        a sit amet mauris. Morbi accumsan ipsum velit.
      </p>
      <div class="button">
        <a class="content-button">LEARN MORE</a>
      </div>
    </div>
  </div>
</header>

I recently started to learn Bootstrap and faced with such a problem, why when I create a he has a margin left / right 15px, the width of my screen 1263px, because these fields seem to have horizontal scrolling, after 1293px fields,and so each new row, how to solve this problem?

Just my template

Screenshoot my console

Upvotes: 1

Views: 1315

Answers (3)

Kolesnik Vladislav
Kolesnik Vladislav

Reputation: 33

<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-2 logo">
        <img src="img/logo.png" alt="Logotype">
      </div>
      <div class="col-lg-7 col-lg-offset-3">
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About</a></li>
          <li class="menu-item"><a href="#">Expertise</a></li>
          <li class="menu-item"><a href="#">Teams</a></li>
          <li class="menu-item"><a href="#">Works</a></li>
          <li class="menu-item"><a href="#">People say</a></li>
          <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="row text-center content-wrapper">
    <div class="col-lg-12 content-header">
      <h1 class="title">We Are Awesome Creative Agency</h1>
      <p class="description-header">
        This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus
        a sit amet mauris. Morbi accumsan ipsum velit.
      </p>
      <div class="button">
        <a class="content-button">LEARN MORE</a>
      </div>
    </div>
  </div>
  </div>
 </header>

Upvotes: 0

Surya prakash
Surya prakash

Reputation: 56

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. You must give 1263px width to the container and inside that you should use rows to avoid horizontal scrolling.

Container element will have a padding of 15px on left and right. Rows will have negative margin of 15px on both left and right side, which will compansate the space used(for padding) by the container. So that your rows will appear 100% on your screen and avoids horizantal scrolling.

Upvotes: 3

Andrew I.
Andrew I.

Reputation: 252

Try margin-left: 0px; and margin-right: 0px. Then set it to margin: 0 auto and change width to width: 100%. This might help it, if not, I may need a snippet of your code to fiddle around with it.

Upvotes: 0

Related Questions