html - How to override an element CSS? -

i have element setting width site on specific pages want remove width. can't remove element since it'll break pretty every page on site. (especially header template)

i tried doing

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

but page still inheriting element css.

this structure of 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 appreciated, i'm stuck!

you should use "width" if trying set page width. "max-width" be, , depends on content. don't need !important.

.pagewidth {      padding-right: 5px;      padding-left: 5px;      margin: 0 auto;      width: 1350px;      box-sizing: border-box;  }    .nopagewidth {margin: 0 auto; width: 1920px !important;}