background color is not applied? - html

Question

I am stuck with a problem , when am trying to give background colour on my top bar its won't applied , I tried lots of time but still its won't working, please try to fix my error
This is my simple top bar code
topbar.html
<div class="header-top bg-dark" style="background-color: black;">
<div class="container-fluid bg-dark" style="background-color: black;">
<div class="left-side float-left ml-5">
<p>Search</p>
<p style="text-indent: 20px;">About Us</p>
<p style="text-indent: 20px;">Contact Us</p>
</div>
<div class="right-side float-right mr-5">
<p>Login</p>
<p style="text-indent: 20px;">Register</p>
</div>
</div>
</div>

Answer 1

Two problems:
Your float is breaking the layout, so you need to add the class .clearfix to the parent to fix it.
The class bg-dark adds !important, so if you want to override it, you need to do like background-color: black !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="header-top bg-dark" style="background-color: black !important;">
<div class="container-fluid bg-dark clearfix" style="background-color: black !important;">
<div class="left-side float-left ml-5">
<p>Search</p>
<p style="text-indent: 20px;">About Us</p>
<p style="text-indent: 20px;">Contact Us</p>
</div>
<div class="right-side float-right mr-5">
<p>Login</p>
<p style="text-indent: 20px;">Register</p>
</div>
</div>
</div>

Answer 2

i think because you are using inline css, you could do like this
open another file for css and give it the
css file
mycolor{ background-color: black;}

Answer 3

you are getting other color because of the class you are using bg-dark so either you remove that from div class names or replace your codes with following lines :
<div class="header-top bg-dark" style="background-color: black !important; ">
<div class="container-fluid bg-dark clearfix" style="background-color: black !important;">
OR
<div class="header-top" style="background-color: black; ">
<div class="container-fluid clearfix" style="background-color: black;">
this !important will overwrite bg-dark attribute of the div class

Answer 4

Instead of using inline styles for multiple paragraph or other repeating elements, you can simply put <styles> tag and add your styles there so it will be more readable or put your styles in different file and link it to your html.
As for the code, you can try the !important ending if the style is not applied, also you need to change the color of your text
Here is an example
<div class="header-top bg-dark">
<div class="container-fluid bg-dark clearfix">
<div class="left-side float-left ml-5">
<p>Search</p>
<p>About Us</p>
<p>Contact Us</p>
</div>
<div class="right-side float-right mr-5">
<p>Login</p>
<p>Register</p>
</div>
</div>
<style>
.header-top, .container-fluid {
background-color: black !important;
}
p {
text-indent: 20px;
color: white;
}
</style>