Что то я не могу понять в чем дело? Почему так происходит? Помогите пожалуйста разобраться! Вся вёрстка на Bootstrap у меня.
При полном размере экрана div'ы в таком виде, картинка и под ней белая плашка с текстом, мне так это и надо.
При уменьшении экрана, div'ы адаптируются и уменьшаются, всё как и положено.
Но стоит дойти до разрешения экрана, где не помещаются два div'а, и они начинают выстраиваться один под одним (это тоже нормально). Но происходит следующее, что картинка встаёт в нужное положение, а div с белой плашкой на которой текст смещается влево:
Подскажите, как это исправить? Вот код секции (за написания кода не судите строго, только учусь):
HTML код:
<section id="latest-works">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2">
<h2>Check out our latest works</h2>
<p class="large">Magnis modipsae que voloratati andigen
daepeditem quiate re porem aut labor.</p>
</div>
</div>
<div class="row text-center cont">
<div class="col-md-6">
<div class="item-works">
<img src="img/work1.jpg" alt="">
<div class="works">
<h4>Grand Motel gets an identity brushup</h4>
<p>Identity</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="item-works">
<img src="img/work2.jpg" alt="">
<div class="works">
<h4>Grand Motel gets an identity brushup</h4>
<p>Identity</p>
</div>
</div>
</div>
</div>
</div>
</section>
CSS код:
body{
background: #fff;
font-family: 'Source Sans Pro', sans-serif; /*font-family: 'Lato', sans-
serif;*/
font-size: 22px;
color: #73879c;
font-weight: 400;
}
img{
max-width: 100%;
height: auto;
}
h1{
font-family: 'Lato', sans-serif;
font-size: 78px;
color: #fff;
font-weight: 900;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 44px;
color: #506a85;
font-weight: 700;
}
h3{
font-family: 'Lato', sans-serif;
font-size: 26px;
color: #506a85;
font-weight: 700;
}
h4{
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #506a85;
font-weight: 700;
}
/* ============================latest-works============================== */
#latest-works{
padding: 80px 0;
background: #f2f5f7;
}
#latest-works .works{
background: #fff;
padding: 10px;
box-sizing: border-box;
}
.works p{
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #73879c;
}
.cont{
margin-top: 60px;
}