Having some trouble getting my carousel to align horizontally with other text in a row – it keeps taking up the full width instead of the 40% I've set.
Below, you'll find the code snippet and screenshots for reference.
In the screenshot above, you can see that the carousel is displayed above the text when I actually want them side by side.
While using Chrome's development tools, I noticed that there seems to be an unaccounted margin on the right side, even though it's not specified anywhere in my code D:
Code:
<div style="border:2px solid #cecece;margin-left:7%;margin-top:3%;margin-right:7%;padding:1%;">
<div id="carousel-example-generic" class="carousel slide span4" data-ride="carousel" style="margin:0px !important;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://images.eurogamer.net/2013/usgamer/league_of_legends.jpg" alt="...">
<div class="carousel-caption">
League of Legends
</div>
</div>
<div class="item">
<img src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/09/03/minecraft.jpg" alt="...">
<div class="carousel-caption">
Minecraft
</div>
</div>
<div class="item">
<img src="http://www.gamerheadlines.com/wp-content/uploads/2013/11/135.jpg" alt="...">
<div class="carousel-caption">
Call of Duty: Ghosts
</div>
</div>
</div>
</div>
<div class="span5">
<p>Test</p>
</div>
</div>
</div>
CSS:
.carousel{width:40% !important;}
.carousel .slide {
width:40% !important;
}