I am encountering some difficulties with the grid system in Bootstrap 4. I have a main content section with col-sm-9 and a right sidebar with col-sm-3 float-right. However, the sidebar does not align properly starting from the top, instead it appears just after the end of col-sm-9. I want both columns to be perfectly aligned.
This is how the page currently looks: https://i.sstatic.net/2IMYJ.png You can view the code for the page here: Code
Below is my current HTML structure:
<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
<div class="content-featured-image">
<img>
</div>
</div>
<div class="clearfix"></div>
<div class="gs-track col-sm-9"><!--start player-->
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->
</section>
I managed to align the sidebar with the content by moving the sidebar box before the player, but this is not the behavior I want to maintain.