---
title: Full Width Section CSS Code Snippet
description: "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…"
url: "https://www.lukehayes.com.au/kb/full-width-section-css-code-snippet/"
updated: "2021-11-04"
category: CSS
---

# 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;
}
```