When the window is in full screen, such as lg or md, the content fits within the container. However, when I resize the window to be smaller, the image overflows outside of the container.
This layout was created using Bootstrap 3. Below is the HTML and CSS code that was used:
<styles>
.CustomDiv
{
background-color: white;
margin: 6px;
min-height: 1000px;
text-align: center;
font-size: large;
border-radius: 3px;
padding: 0px;
}
.customImg
{
max-width: 1100px;
position: relative;
}
body
{
background: url("images/wood2.jpg") no-repeat;
}
body > nav > .container > .navbar-collapse > ul
{
font-size: 15px;
font-weight: 10;
font-family: 'Segoe UI';
letter-spacing: 1px;
}
body > nav > .container > .navbar-collapse > ul > li > a
{
padding: 20px 30px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
</styles>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="Pge2.html">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div class="CustomDiv">
<br>
<div class="container">
<div class="customImg">
<div id="imageCarousel" class="carousel slide carouselCustom" data-interval="2000">
<div class="carousel-inner">
<div class="item active center-block">
<img src="images/Coffee.jpg" class="center-block img-responsive"/>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>