How to override an element CSS?

Question

I have an element which is setting the width for the site but on specific pages I want to remove the width. I can't remove the element since it'll break pretty much every page on the site. (Especially the header template)

I tried doing

.nopageWidth {margin: 0 auto; max-width: 1920px !important}

but the page was still inheriting the element css.

This is the structure of the page -

.pageWidth {
    padding-right: 5px;
    padding-left: 5px;
    margin: 0 auto;
    max-width: 1350px;
    box-sizing: border-box;
}

.nopageWidth {margin: 0 auto; max-width: 1920px !important;} 

<div class="pageWidth">
<div class="pageContent">
<article>
<div class="nopageWidth">
</div>
</article>
</div>
</div>

Help would be appreciated, I'm stuck!

Answer 1

You should use "width" if you are trying to set the page width. "max-width" is the most it could be, and depends on content. You probably don't need the !important.

.pageWidth {
    padding-right: 5px;
    padding-left: 5px;
    margin: 0 auto;
    width: 1350px;
    box-sizing: border-box;
}

.nopageWidth {margin: 0 auto; width: 1920px !important;} 

Answer 2

You are only using max-width, which means, the default width is still set to its default 100%. So if the container is less than 1920px wide, your .nopageWidth will never become 1920 wide, since it will stop getting wider at 100% of the parent element. Use a fixed (i.e. px value) width setting to avoid this.