Unexpected sidebar color

Hello,

See, the color of the sidebar area has a dark blue color. Without I color it in bootstrap or CSS. How is it possible?!

Here comes the code:

<div class="container">
    <div class="row ">
        <header class="col-12 bg-primary" style="width: 100%; height:100px; ">
        </header>


        <div class="main col-12 mt-1  " style="margin-left:0px; height:600px;width:75%; background-color:aliceblue;">


        </div>

        <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center " style="width:25%; height:600px; z-index:1; overflow-x:hidden; background-color:aquamarine;  ">

            <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
            <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>


        </div>

        <footer class="col-12 bg-info" style="width:100%;height:100px;">
        </footer>

    </div>

       
</div>

regards,

Saeed,

Hey, I see it like this, do you mean the upper bar ?
if it’s so, its because of the bg-primary class ! it is its default color

Thank you Bafian,

I mean this div:

 <div class="sidebar col-md-4 col-lg-3   mt-1 ml-1 justify-content-center " style="width:25%; height:600px; z-index:1; overflow-x:hidden; background-color:aquamarine;  ">

            <div class="mt-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>
            <div class="mt-2 mb-2" style=" width:250px; height:300px;background-color:aquamarine;"></div>


        </div>

I mean div with the class sidebar. I can’t change it’s color!
Do you have any idea?

thanks,
Saeed

You have inline styles on that element and its child elements. Remove the inline styles or use !important to overwrite them in the CSS.

For example:

.sidebar > div {
  background: red !important;
}