I am working with the following HTML structure:
<div class="container-fluid">
<div class="row">
<div class="col-sm-push-3 col-sm-6 text-center wrapper">
<div class="col-sm-4 inner-wrapper">
<span class="text-center circle">A</span>
<p class="text-center center-block">Click Start Now</p>
<a href="" class="text-center center-block start-now">Start Now</a>
</div> <!-- col-sm-4 -->
</div> <!-- col-sm-6 -->
</div> <!-- row -->
</div> <!-- container-fluid -->
There will be two more elements with the class col-sm-4 inside the col-sm-6.
Additionally, I have the following CSS applied:
.container-fluid{
margin:10% auto
}
.wrapper{
color: #fff;
}
.inner-wrapper{
background-color: #ccc
}
.circle{
border-radius: 50%;
border: 1px solid #d1cfc8;
background-color: #000;
padding: 5% 15%;
font-size: 300%;
}
.start-now{
color: #fff;
background-color: #96d0f1
}
View the code live with Boostrap on this fiddle: http://jsfiddle.net/aq9Laaew/93303/
However, the circle element is extending beyond the row and is not fitting the content properly. It is also extending behind the <p> element below it.
What could be causing this issue? Could it be related to the pseudo element before the row or is there a limitation on increasing the margin to that extent?