When I expand the screen, the img-thumbnail is not centering. I'm confused about why this happens because I don't fully understand how img-thumbnail works and how to resolve it. I have tried adding classes like "img-thumnail img-responsive center-block", but it only partially solves my issue as I also want the caption to be included in the thumbnail.
Here is my HTML code:
<div class="container-fluid">
<div class="well outline">
<h1 class="text-center">Ernest Miller Hemingway</h1>
<h2 class="text-center">The man who made Pamplona famous</h2>
<div class="img-thumbnail">
<image src="http://www.ernesthemingwaycollection.com/_themes/hemingway/img/about-hemingway/galleries/02-20141010225753.jpg" alt="Hemingway with a cow" class="img-responsive">
<div class="caption text-center">
Ernest Hemingway laying down next to a cow that is used by bull fighters for training. </div>
</div>
<div>
<h3>Here is a timeline of Ernest Hemingway</h3>
<div>
<ul>
<li><b>1899</b> - Born in Oak Park, Illinois</li>
// more list items...
</ul>
<p>"Courage is grace under pressure."</p>
<p>- Ernest Hemingway</p>
<div>
<p>If you want to know more about Ernest Hemingway take a look at his <a href="#">wikipedia entry</a>.</p>
</div>
<!-- Figure out how to add the line that crosses tha page on bootstrap -->
<p> Coded by Manuel Martin</p>
</div>
</div>
And here is my CSS code:
h1 {
font-size: 60px;
}
h2{
font-size: 33px;
}
.outline{
margin: 70px 70px;
}