Bootstrap 3.0 der Reihe haben margin-left 15px und margin-right 15px

Question

<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>

ich zu lernen Bootstrap vor kurzem begonnen und konfrontiert mit einem solchen Problem, warum, wenn ich ein schaffen er einen Spielraum links hat/rechts 15px, die Breite meines Bildschirms 1263px, weil diese Felder scheinen horizontal scrollen, nach 1293px Felder und so jede neue Zeile, wie dieses Problem zu lösen?

Just my template

Screenshoot my console

Answer 1

Versuchen margin-left: 0px; und margin-right: 0px. Dann setzen Sie es auf margin: 0 auto und ändern Sie die Breite auf width: 100%. Dies könnte helfen, wenn nicht, brauche ich vielleicht einen Code-Schnipsel, um damit herumzuspielen.

Answer 2

Die Zeilen müssen in einem .container (feste Breite) oder .container-flüssigkeit (volle Breite) platziert werden, damit sie richtig ausgerichtet und gepolstert werden können. Sie müssen dem Container eine Breite von 1263 Pixeln geben und innerhalb dessen sollten Sie Zeilen verwenden, um horizontales Scrollen zu vermeiden.

Das Containerelement wird links und rechts mit 15px aufgefüllt. Zeilen haben einen negativen Rand von 15px auf der linken und rechten Seite, was den Platzbedarf (für das Auffüllen) des Containers ausmachen wird. Damit Ihre Zeilen zu 100% auf Ihrem Bildschirm erscheinen und horizontales Scrollen vermieden wird.

Answer 3

<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>