Looking at the output below:
https://i.stack.imgur.com/pQM8F.pngThe blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly.
Here's the code snippet:
CSS
#circles {
background: #4A90E2;
width: 32px;
height: 32px;
border-radius: 50%;
text-align: center;
display: inline-block;
position: relative;
color: white;
font-size: 23px;
}
HTML
<div class="row" style="background-color: rgba(140, 140, 140, 0.33);">
<div class="col-sm-4 col-sm-offset-5">
<div class="row" style="padding-top: 20px;">
<div class="col-sm-1">
<div id="circles">
1
</div>
</div>
<div class="col-sm-11 pull-right">
<h2 style="vertical-align:top;">Maak je pakje klaar</h2>
</div>
</div>
</div>
</div>
I've attempted using vertical-align but haven't had success with it yet.