Выравнивание моих изображений

Question

Я начинаю и работаю над сайтом. Я слежу за инструкциями моего инструктора, но у меня возникают трудности с разделами «Наш реестр»/«Наша миссия». Как вы можете видеть, изображения не выровнены вместе. Я хочу иметь три изображения в каждой строке, но я не могу этого сделать!

Вот ссылка на сайт http://gabrielr.sgedu.site/FinalProject/#Contact

и ссылку на CSS Style Sheet: http://gabrielr.sgedu.site/FinalProject/css/mainstyle.css

И в HTML код:

<section id="Our-Roster" class="Our-Roster"> 
    <div class="container container--max"> 
    <h2 class="section__title">Our Roster</h2> 

    <article class="Our-Roster__item sm-one-third lg-one-third"> 
     <a href="https://vimeo.com/111731454"> 
     <img src="images/jamesbay.jpg" alt="James Bay - Hold Back the River" width="360" height="240"> 
     <h3 class="Our-Roster__title">James Bay</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 

    <article class="Our-Roster__item sm-one-half lg-one-third"> 
     <a href="https://vimeo.com/141213805"> 
     <img src="images/xambassadors.jpg" alt="X Ambassadors - Unsteady" width="360" height="240"> 
     <h3 class="Our-Roster__title">X Ambassadors</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 

    <article class="Our-Roster__item sm-one-half lg-one-third"> 
     <a href="https://vimeo.com/131065258"> 
     <img src="images/zaralarsson.jpg" alt="Zara Larsson - Uncover" width="360" height="240"> 
     <h3 class="Our-Roster__title">Zara Larsson</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 

    <article class="Our-Roster__item sm-one-half lg-one-third"> 
     <a href="https://vimeo.com/84217069"> 
     <img src="images/oceans.jpg" alt="Oceans - Where Feet May Fail" width="360" height="240"> 
     <h3 class="Our-Roster__title">Oceans</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 

    <article class="Our-Roster__item sm-one-half lg-one-third"> 
     <a href="https://vimeo.com/128250589"> 
     <img src="images/allenstone.jpg" alt="Allen Stone - Perfect World" width="360" height="240"> 
     <h3 class="Our-Roster__title">Allen Stone</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 

    <article class="Our-Roster__item sm-one-half lg-one-third"> 
     <a href="https://vimeo.com/121341988"> 
     <img src="images/ellegoulding.jpg" alt="Ellie Goulding - Love Me Like You Do" width="360" height="240"> 
     <h3 class="Our-Roster__title">Ellie Goulding</h3> 
     </a> 
    </article><!-- end .Our-Roster__item --> 
    </div><!-- end .container --> 
</section><!-- end .Our-Roster --> 

Благодаря

Answer 1

Ваша левая и правые поля на ваших статьях слишком широки.

Вместо

article {margin: 2em;} 

попробовать:

article {margin: 2em 0;} 

Это будет поддерживать верхний и нижний край 2em, но уменьшить левые и правые края к нулю.

Answer 2

добавить этот код в ваш CSS

article { 
    margin-left: 0; 
    margin-right: 0; 
} 

Answer 3

Посмотри он следующую ссылку: http://getbootstrap.com/components/#thumbnails-custom-content

То, что вы видите является компонентом 3 объекта, который вы можете использовать и настраивать по своему вкусу для сайт, который вы строите. Вы можете просто использовать часть, которая просто показывает эскизы.

<div class="row"> 
<div class="col-sm-6 col-md-4"> 
<div class="thumbnail"> 
    <img src="..." alt="..."> 
    <div class="caption"> 
    <h3>Thumbnail label</h3> 
    <p>...</p> 
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a  href="#" class="btn btn-default" role="button">Button</a></p> 
    </div> 
</div>