Experiencing a strange issue with a relative div within a column in Bootstrap 3.
Here's my code:
<div class="col-lg-6">
<div class="large" style="background: url(img/bg.jpg);">
<h1 class="grid-header">Content 1</h1>
</div>
</div>
and
.large {
height: 963px;
background: grey;
margin: 15px 0px;
position: relative;
}
.grid-header {
font-size: 48px;
color: #FFFFFF;
margin: 22px 0 0 22px;
}
Unexpectedly, the margin for .grid-header is not functioning inside .large. All margins are being applied to the body instead of its parent element.
Could there be something that I have overlooked that affects relative layouts within Bootstrap columns?
Thank you