Bootstrap Grid Alignment Issue When Zooming - css

Question

I am having a bit of a problem with my bootstrap grid alignment.
I have three main columns. One for left side bar, one for blog posts, and one for right sidebar.
I'm trying to put a yellow bar on top of left and right sidebar. I have successfully added one on my left sidebar but on my right sidebar, I can't make it have a fixed position. It moves away whenever I zoom-out or zoom-in unlike on my left sidebar.
Here's my index.php code with my sidebars:
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-1">
</div>
<div class="col-md-4">
</div>
<div id="maineverything">
<div class="col-md-3">
<?php get_search_form(); ?>
<?php get_sidebar('1'); ?>
</div>
<div class="col-md-7 blog-main">
<div class="blogtitle">
<p>PAKU SQUAD <span class="subheader1">BLOG</span></p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
<div class="col-md-2">
<?php get_sidebar('2'); ?>
</div>
</div>
</div> <!-- /.row -->
And here's my css code for my bootstrap grid:
/* Column Codes */
.row {
padding: 100px;
}
#maineverything {
padding-left: 150px;
display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}
.col-md-2 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-3 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-4 {
margin-right: 47px;
float:right;
max-width:100%;
width: 250px;
height: 50px;
background-color: #feb300;
}
.col-md-5 {
padding-top: 50px;
max-width:100%;
margin-left: 150px;
width: 250px;
height: 30px;
background-color: #feb300;
}
.col-md-7 {
max-height: 100%;
height: 1920px;
border-bottom: 2px solid #a7a7a7;
}

Answer 1

There is not proper bootstrap HTML Structure,You need to add row in container div and col-md-* in row Refer it https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp,In bootstrap width apply by default so no need to apply width and padding and margin,I have changed your HTML Structure by adding container and remove unnecessary css...Check Now
/* Column Codes */
.row {
padding:0px 100px;
}
#maineverything {
display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}
.col-md-2 {
border-bottom: 2px solid #a7a7a7;
background-color: #f0f0f0;
}
.col-md-3.bgyellow{
height: 30px;
background-color: #feb300;
}
.bgyellow2{
height: 50px;
background-color: #feb300;
}
.col-md-3 {
background-color: #f0f0f0;
}
.col-md-4 {
height: 50px;
background-color: #feb300;
}
.col-md-5 {
height: 30px;
background-color: #feb300;
}
.col-md-7 {
border-bottom: 2px solid #a7a7a7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3 bgyellow">
</div>
<div class="col-md-7 col-xs-7">
</div>
<div class="col-md-2 col-xs-2 bgyellow2">
</div>
</div>
</div>
<div id="maineverything">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3">
<?php get_search_form(); ?>
<?php get_sidebar('1'); ?>
</div>
<div class="col-md-7 col-xs-7 blog-main">
<div class="blogtitle">
<p>PAKU SQUAD <span class="subheader1">BLOG</span></p>
<hr>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div>
</div> <!-- /.blog-main -->
<div class="col-md-2 col-xs-2">
<?php get_sidebar('2'); ?>
</div>
</div> <!-- /.row -->
</div>
</div>