I'm facing an issue with the alignment of my bootstrap grid.
Currently, I have three main columns in my layout - one for the left sidebar, one for the blog posts, and one for the right sidebar.
My challenge lies in trying to add a yellow bar on top of both the left and right sidebars. While I've managed to place it successfully on the left sidebar, I'm struggling to keep it fixed on the right sidebar. It tends to shift away when I zoom in or out, unlike the one on the left.
Below is my index.php code featuring the 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 this is the css code related to 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;
}