exclude div from parent style - html

Question

I'm trying to override the .container class in bootstrap. I'm using Drupal 7 and I have a css file for my theme which is working perfectly until I want to override the .container
my HTML
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
that PHP code will insert the class .container
I need to give the div with class .top-diva 100% size without any padding from the .container I've tried the child > selector and descendant selector and the :not(.top-div) methods nothing works. When I use the :not(.top-div) it applies changes on each and every page and element on the website AND the div which contains the .top-div which is really weird. Suggestions?

Answer 1

In bootstrap, the padding is applied on the container, not the inner divs. To override this on one element you need to give it negative horizontal margins.
Something like:
.container .top-div {
margin-left:-10px;
margin-right:-10px;
}
Where 10px should be replaced by the padding on .main-container.
If this doesn't work right away you may need greater specificity
Bootstrap's built-in .row class uses this method

Answer 2

Why don't you try:
.main-container {
position:relative;
}
.top-div {
position:absolute;
left:0;
top:0;
}
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>

Answer 3

If you are using bootstrap css than you don't need to give any custom css
You try to just add row class in your top-div class
it's a in built in bootstrap.css So no need for any extra custom css.
.row {
margin-left: -10px;
margin-right: -10px;
}
Example
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
<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="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
Hope this will helps you.