画像の整列

Question

私は初心者で、私はウェブサイトで働いています。私はインストラクターの指針に従っていますが、「私たちの栄誉」/「私たちの使命」のセクションでは苦労しています。あなたが見ることができるように、画像は一緒に整列していません。私は各列に3つのイメージを持っているが、私はそれを行うことはできません！ 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

あなたの左ここ

は、ウェブサイト http://gabrielr.sgedu.site/FinalProject/#Contact

とCSSスタイルシートへのリンクへのリンクです記事の右余白が広すぎます。代わりに

article {margin: 2em;} 

試してみるの

：

article {margin: 2em 0;} 

これは2emの上部と下部のマージンを維持するが、ゼロに左右のマージンを削減します。

Answer 2

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

Answer 3

は彼以下のリンクをご覧持って、あなたのCSSにこのコードを追加：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>