How can I add margin to both sides of my website?

Store Design

Topic summary

Goal: add left/right margins to a Shopify Prestige theme so content is narrower while section backgrounds can extend full width.

What was tried:

  • Initial CSS (media query) added margins to body.prestige–v4 for wide screens (≥1200px). This narrowed the whole page on a solid background.
  • Revised CSS targeted specific sections (slideshow, header, announcement, a promo bar) with margins/padding. The visual result wasn’t as desired.

Updated guidance (most recent):

  • Replace earlier rules with a media query that:
    • Applies margin: 0 8vw to main#main and header#section-header (≥1200px).
    • Sets body.prestige–v4 { background: #fff; } for a white page background.
  • This centers/narrows core content while keeping the page background white. Whether the top green/black bars remain 100% width is not explicitly resolved.

Open items:

  • Request to keep specific top bars (announcement/promo) full width while other content is constrained remains partially addressed.
  • Another user with a different site cannot find theme.css under Assets and asked where to add code; no response yet.

Notes:

  • Changes rely on CSS media queries (rules that apply above a screen width) and element-specific selectors.
  • Images were provided to illustrate desired spacing and full-width sections.
Summarized with AI on January 18. AI used: gpt-5.
1

|
Hello,

I’d like to add a certain amount of padding(or margin? I’m not sure what is the correct word…) to each side of my website. (lokkboxx.com)

For now, my website is full width and everything looks too big.
I attached the image to explain what i want to achieve.
Can anybody let me know how to edit this?





theme: prestige
(I already asked the developer and he said it’s not their supporting issue and I have to hire coder to do it. :downcast_face_with_sweat: )


Thank you in advance.

lokkboxx.jpg
lokkboxx.jpg4723×1905 536 KB


|
| - |

1 Like
2

Hi @gizmo77

Do you mind sharing your website so we can provide a specific code for you? Thank you

3

Hi

my website is lokkboxx.com

1 Like
4

@gizmo77

Thank you for that. Please follow the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (min-width: 1200px) {
body.prestige--v4 {
    margin: 0 8vw;
}
}
5

Thank you so much @made4Uo

But the look I want is not whole page is cut out and on the one-colored background.

I more want each section background is extending to the end like this website https://yourstori.com/

Screen Shot 2022-07-28 at 6.22.19 PM.png
Screen Shot 2022-07-28 at 6.22.19 PM.png1914×990 296 KB

1 Like
6

@gizmo77

Sorry about that. I copied exactly what you have on your image

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (min-width: 1200px) {
div#shopify-section-template--15236130570297__slideshow {
    margin: 0 8vw;
}

header#section-header{
    margin: -1px 8vw;
}

section#section-announcement {
    margin: 0 8vw;
}

div#bar583018_737710 {
    padding: 0 8vw;
}
}

Image preview

made4Uo_0-1659059549658.png
made4Uo_0-1659059549658.png1019×863 464 KB

7

Thank you for all help! @made4Uo

I tried

@media only screen and (min-width: 1200px) {
div#shopify-section-template–15236130570297__slideshow {
margin: 0 8vw;
}

header#section-header{
margin: -1px 8vw;
}

section#section-announcement {
margin: 0 8vw;
}

div#bar583018_737710 {
padding: 0 8vw;
}
}

and somehow it looks like this.

Screen Shot 2022-07-28 at 7.07.58 PM.png
Screen Shot 2022-07-28 at 7.07.58 PM.png1918×981 286 KB

Actually I like as

@media only screen and (min-width: 980px) {

body.prestige–v4 {

margin: 0 8vw;

}

}

Can you let me know

how to change background-color white and

how to stretch green and black bar on the top 100% width?

Thank you again

8

@gizmo77 ,

Got it.

Please replace the code

@media only screen and (min-width: 980px) {

body.prestige–v4 {

margin: 0 8vw;

}

}

with this

@media only screen and (min-width: 1200px) {
main#main {
    margin: 0 8vw;
}

header#section-header {
    margin: 0 8vw;
}

body.prestige--v4 {
    background: #fff;
}
}
9

Hi Made4Uo,

I was wondering if you could help me with the same issue regarding adding margins to the webpage as you did with Lokkboxx. My site is 4StitchesDesigns.com. I tried to use your code, however, under the Asset folder I do not have a theme.css. Any help would be appreciated!