How to Override parent element css for child element

Question

I have a site with multiple menus. I have defined enteire page content inside a div with a class container and applied bootstrap css styles (margin-left:auto and margin-right:auto etc.,) to make the page centered. Now elements in one of the file must start from extreme left side of the browser. Because of the css applied for parent i could not start the element from left side. I have applied margin-left with minus pixels to solve the issue. But when the browser window is small element is not completely visible in browser because of minus value applied for margin-left.

<div class="container" style="margin-left:auto;margin-right:auto">
    <div id="start_from_left" style="margin-left=-50px"> </div>
</div>

Answer 1

if your tags have

style="" 

that takes priority over anything else.

What you could try is the !important on your css tags, but its bad practice.

eg

margin-left:1px!important;
margin-right:0px!important;

Answer 2

You can have additional class for your container.

.container {
    margin-left: auto;
    margin-right: auto;
}

.container.wide {
    margin-left: 0;
    margin-right: 0;
}