Making 3 images sit next to eachother in bootstrap carousel and be centered
<p>I'm trying to make a bootstrap carousel. However, I'm trying to make one of the slides consist of 3 images that sit next to each other wrapped in a div. </p>

<p>All the other slides in the show are centered and look nice enough, but the slide that consists of 3 img wrapped in a div just keeps floating to the left of the page even though I haven't told them to. </p>

<p>I will include code. </p>

<p>Carousel </p>

<pre><code>  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
  &lt;/ol&gt;

  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="images/jumbotron.jpg" alt="cd release promo"&gt;
    &lt;/div&gt;

    &lt;div class="item"&gt;
      &lt;img src="images/Coldclock Knockout Local 662 (10).jpg" alt="Robby and Ryan in blue"&gt;
    &lt;/div&gt;


    &lt;!-- Div containing 3 images --&gt; 
    &lt;div id="ryanSlide" class="item"&gt;
      &lt;div id="ryanSlideContainer"&gt;
        &lt;img src="images/Coldclock Knockout Local 662 (38).jpg" alt="Ryan 1"&gt;
        &lt;img src="images/Coldclock Knockout Local 662 (46).jpg" alt="Ryan 2 B&amp;W"&gt;
        &lt;img src="images/Coldclock Knockout Local 662 (47).jpg" alt="Ryan 3"&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="item"&gt;
      &lt;img src="images/Coldclock Knockout Local 662 (48).jpg" alt="Crowd Shot"&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Left and right controls --&gt;
  &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
</code></pre>

<p>CSS + bootstrap is also being used on this page</p>

<pre><code>body {
    background-color: black;
}



/*================================================================================================

NAVIGATION  

================================================================================================*/



.active {
    border-bottom: 1px solid red;
}
.navbar-inverse .navbar-nav &gt; .active &gt; a{
    font-size: 1.25em;
}

#navigation {
    margin-bottom: 0px;
    border-radius: 0px;
}



/*================================================================================================

JUMBOTRON

================================================================================================*/


#myCarousel img {
    height: 500px;
    margin: 0 auto;
}

#ryanSlide {
    margin: 0 auto;
    width: 100%;
}

#ryanSlideContainer {
    margin: 0 auto;
}

#ryanSlide img {
    margin: 0 auto;
}

/*================================================================================================



================================================================================================*/
</code></pre>

<p>I'm not using any custom javascript.</p>

<p>I just cant seem to figure out how to get the one slide to center itself like the others.</p>