How to Override Max-Width for Specific Div

How to override max-width for specific div?

Are you just looking to unset the max-width property? If so, try:

#pixel-perfect img {
    max-width: none;
}

css: how to override max-width value with a larger (less restrictive) value

You can override (unset) max-width with

.foo{ max-width:none; }

... to clear any inherited max-width.

Override max-width from parent class

Just make two containers and max-width of line 100% and it will stretch to whole screen no matter of container width

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  max-width: 1170px;}.intermediate-line {  max-width: 100%;  border-top: 1px solid; }.containerx {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  max-width: 70px;}.intermediate-linex {  max-width: auto;  border-top: 1px solid; }.containery {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  max-width: 1170px;}.background-primaryy{max-width: 180px;}.intermediate-liney {  max-width: initial;  border-top: 1px solid; }

<footer class="background-primary">  <div class="container">    <div class="row">      <div class="col-1-4">logo</div>      <div class="col-1-4">address</div>      <div class="col-1-4">Phone Number</div>      <div class="col-1-4">Social Media</div>    </div>  </div>  <div class="intermediate-line"></div>  <div class="container">    <div class="row">      <div class="col-1-4">copyright</div>      <div>Privacy Policy</div>      <div>Terms of Use</div>    </div>  </div>  </footer>
<br><br><footer class="background-primaryx">  <div class="containerx">    <div class="row">      <div class="col-1-4">logo</div>      <div class="col-1-4">address</div>      <div class="col-1-4">Phone Number</div>      <div class="col-1-4">Social Media</div>    </div>   <div class="intermediate-linex"></div>     <div class="row">      <div class="col-1-4">copyright</div>      <div>Privacy Policy</div>      <div>Terms of Use</div>    </div>  </div>  </footer><br><br><footer class="background-primaryy">  <div class="containery">    <div class="row">      <div class="col-1-4">logo</div>      <div class="col-1-4">address</div>      <div class="col-1-4">Phone Number</div>      <div class="col-1-4">Social Media</div>    </div>   <div class="intermediate-liney"></div>     <div class="row">      <div class="col-1-4">copyright</div>      <div>Privacy Policy</div>      <div>Terms of Use</div>    </div>  </div>  </footer>

Override parent's max-width from child css

You cannot override the parent styles with child styles in CSS, as there is no parent selector in CSS.

However, you don't need to override anything to give the child element a width that spans 100% of the viewport; simply use the viewport unit vw as width: 100vw:

body {  margin: 0;}
.outer {  height: 100px;  width: 200px;  max-width: 200px;  background: red;  padding: 25px;}
.inner {  height: 100px;  width: 100vw;  background: blue;}

<div class="outer">  <div class="inner"></div></div>

Override max-width margins of parent container?

Here's a generic solution that keeps the child element in the document flow:

child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

We set the width of the child element to fill the entire viewport width, then we make it meet the edge of the screen by moving it to the left by a distance of half the viewport, minus 50% of the parent element's width.

Demo:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

ul, li {  margin: 0;  padding: 0;  display: inline-block;}body {  margin: 5px 0 0;}header {  position: relative;  margin: 0 auto;  max-width: 400px;  border: 1px dashed #6DA76D;}header:after {  content: ' ';  position: absolute;  top: 0;  left: 50%;  height: 5px;    transform:translate(-50%,-100%);  width:100vw;
  background: pink;}

<header>  <nav>    <ul>      <li>Nav One</li>      <li>Nav Two</li>    </ul>  </nav></header>