Bootstrap: выравнивать содержание

Question

Я работаю на этом сайте http://ba-test.nowcommu.myhostpoint.ch/antonio2/ (Bootstrap)

Как вы можете видеть содержимое не идеально выровнены с первым слайдером. То, что мне нужно, - это полностью выровнять его (см. Скриншот). Я предоставить вам HTML код тоже:

HTML:

 <!-- Start 3 columns --> 
    <div class="row fluid bg" style="background-image: url('img/bg_section.png'); background-size: 100%; height: 666px;"> 
     <div class="col-lg-12"> 
      <div class="col-md-4"> 
       <h1 class="headline home">ARCHITEKTUR</h1> 
       <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2> 
       <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p> 
      </div> 

       <div class="col-md-4"> 
       <h1 class="headline home">LAGE</h1> 
       <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2> 
       <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p> 
      </div> 

      <div class="col-md-4"> 
       <h1 class="headline home">WOHNUNGEN</h1> 
       <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2> 
       <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p> 
      </div> 

      <div class="col-md-8 picture"> 
      <img class="img-responsive" src="img/place.jpg" /> 
      <h2 class="text-under-picture">Lorem Ipsum. <strong>Proin</strong> gravida nibh vel<strong><br>velit</strong> auctor aliquet. Lorem <strong>Ipsum</strong></h2>  
      </div> 

     </div> 
    </div> 
    <!-- End 3 Columns --> 

Answer 1

С padding на .bg, вы можете достичь эффекта:

.row.fluid.bg { 
    margin-bottom: 500px; 
    padding: 0 50px; /* this is new - adjust the 50px if you want*/ 
} 

(посмотреть на main.css линии 92)

Th Хорошая вещь об этом методе заключается в том, что внутренние столбцы принимают новый размер.

---

Как мало дополнения, вы можете попробовать добавить

.navbar { 
    margin-left: 64px; 
    margin-right: 64px; 
}