To fix this issue It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
help you fix your problem Since bootstrap 3 the syntax changed: span does't exist now it's col-width_wanted-number_of_columns so for you something like this :
<div class="sidebar border col-xs-4" >
</div> <!-- sidebar end -->
<!-- content start -->
<div class="blogBody border col-xs-8">
</div> <!-- content end -->
</div><!-- main dev end -->
Bootstrap grid alignment issue in col-xs
By : jaydip
Date : March 29 2020, 07:55 AM
This might help you I find it quite hard to understand what exactly you want, but some suggestions. First of all don't touch Bootstrap's grid classes (e.g. the .more-pad and .padding-fix-left classes unless you absolutely need to. You'll likely break its behaviour.
I wish this helpful for you As a matter of fact you're doing it wrong. It's just a coincidence you have it running, but in other scenarios it won't, and you'll have other issues like aligning, etc. Your problem is that you're nesting col.... inside col.... when you actually need to use .row --> .col-...-x (where x is a number and the sum of all those digits plus any offset you have must be 12).
Hope this helps Adding padding to the box holding the col-md-4 will overwrite Bootstraps' default gutter padding and hence removing the spacing between columns. The two options are to add padding to an inner element, than where the col-md-4s are placed.