Recently diving into the world of Bootstrap, I have come across a puzzling issue:
Take a look at the HTML code from my website:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Watch The Shawshank Redemption</title>
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_.jpg" />
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<h2 class="pagination-centered">The Shawshank Redemption</h2>
<p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
<div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
<div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//vjs.zencdn.net/4.1/video.js"></script>
<script src="/Scripts/initializers/initializer.js"></script>
</body>
</html>
However, I've encountered an issue where the text is overlapping with the image, causing a visual error as seen in the image below:
Can someone explain why the text is overlapping with the image? I assigned the image 3 columns and the text 9 columns within the row, so I'm uncertain how they are overlapping.