maindiv and I want it to go beyond the
maindiv which is an image. How could I do that? As margin-top is moving it in accordance to the top of the page https://codepen.io/dimitris51/pen/GxOVbX
width: 50%;that is set up for the
col-xs-6with the settings for your
yellowclasses. Try making another div within the column div and using that for the circles.
@Raghav17 - make your HTML for the middle row look like this:
<div class="row mid-row"> <div class="col-xs-6"><div class="green"></div></div> <div class="col-xs-6"><div class="yellow"></div></div> </div>
In other words, and then you get a little better behavior of the grid, you might be able to play with the alignment then.