# make section full width

**URL:** <https://community.shopify.com/t/make-section-full-width/358604>\
**Category:** Store Design\
**Tags:** customizations, css, html\
**Created:** [September 16, 2024, 1:05pm UTC](https://community.shopify.com/t/make-section-full-width/358604 "2024-09-16T13:05:40Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

A user seeks help making a website section full-width instead of boxed, as this option isn't available in their theme settings.

**Three solutions provided:**

1. **BSS-TekLabs**: Add custom CSS code to the theme.liquid file before the `</head>` tag

2. **websensepro**: Similar approach—insert CSS into theme.liquid to override the section width constraints

3. **Made4uo-Ribe**: Navigate to the theme's main CSS file (main.css, base.css, style.css, or theme.css) and add CSS targeting the specific section ID with negative margins (`margin-left: -30px !important; margin-right: -30px !important;`)

All solutions involve editing theme code files through the Shopify admin panel (Online Store → Themes → Edit code). Each responder included screenshots demonstrating the expected full-width result and requested the user mark their answer as the accepted solution if helpful.

<div class="post-metadata">

**Author:** ![Daniel19901](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@Daniel19901](https://community.shopify.com/u/Daniel19901)\
**Post date:** [September 16, 2024, 1:05pm UTC](https://community.shopify.com/t/make-section-full-width/358604/1 "2024-09-16T13:05:40Z")

</div>

Hi can anyone help me change the section to full width and not boxed? don’t have it in settings  
[https://zpaik4sx3nvsr2ag-66575565096.shopifypreview.com](https://zpaik4sx3nvsr2ag-66575565096.shopifypreview.com)

 ![Daniel19901_0-1726491845442.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/a/a/e/aaed5978b0cfd2307c2d6e91420955187bf02a1d.jpeg)

---

<div class="post-metadata">

**Author:** ![BSS-TekLabs](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bss-teklabs/32/272729_2.png) [@BSS-TekLabs](https://community.shopify.com/u/BSS-TekLabs)\
**Post date:** [September 16, 2024, 1:15pm UTC](https://community.shopify.com/t/make-section-full-width/358604/2 "2024-09-16T13:15:47Z")

</div>

- Here is the solution for you @Daniel19901
- Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

```markup

```

- Here is the result you will achieve:

 ![BSSTekLabs_0-1726492535197.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/1/f1cd04859fc4d2145d5dee2b25f5b1c7ebf4f728.jpeg)

- Please press ‘ **Like** ’ and mark it as ‘ **Solution** ’ if you find it helpful. Thank you.

---

<div class="post-metadata">

**Author:** ![websensepro](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/websensepro/32/132469_2.png) [@websensepro](https://community.shopify.com/u/websensepro)\
**Post date:** [September 16, 2024, 1:24pm UTC](https://community.shopify.com/t/make-section-full-width/358604/3 "2024-09-16T13:24:49Z")

</div>

Hi @Daniel19901 ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before 

```css

```

 ![websensepro_0-1726493076500.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/a/8/8/a88e73215be660bc1257fa52e5c02abfd7781dea.png)

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

---

<div class="post-metadata">

**Author:** ![Made4uo-Ribe](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/made4uo-ribe/32/9941_2.png) [@Made4uo-Ribe](https://community.shopify.com/u/Made4uo-Ribe)\
**Post date:** [September 16, 2024, 1:46pm UTC](https://community.shopify.com/t/make-section-full-width/358604/4 "2024-09-16T13:46:31Z")

</div>

Hi @Daniel19901

Check this one.

From you Admin page, go to Online Store \> Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

```css
div#shopify-section-template--22442120413510__1726134055bffafc4a {
    margin-left: -30px !important; 
    margin-right: -30px !important;
}

```

And Save.

Result:

 ![Made4uoRibe_0-1726494380479.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/b/4/5b4ff5237b307b5409fc70aa25df770ec3ac6d38.jpeg)

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!