Full Width Section CSS Code Snippet

This code can be used if you have a section inside an element with width already set and you wanted to make this section stretch the full width of the screen.

example code:

// main is set to have a max-width of 900px only
<div class="main">
   <p>This paragraph is maxed at 900px wide only based on the .main parent div.</p>


   <div class="fullwidth">
       <p>This paragraph will stretch the whole with as I have add .fullwidth class in it. CSS for this class is shown below.</p>  
   </div>



</div>

.fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: unset !important;
    padding: 0 !important;
}