Hi guys. On desktop view my website stretches across the page. Making it look very messy. I want to implement margins to the left and right. I was previously using supply theme which had this built in. However in debut theme I have no idea how to change these elements. My mobile view looks great and I don’t want to compromise it.
would love any advice
Alex 
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi
Thanks for getting back to me so quickly!
My website is byeheat.com.au
Alex
Hi @KetanKumar
thank you for getting back to me
I changed from supply theme to debut theme. This is a photo of my old theme desktop (supply theme ).
I was attempting to create borders on the debut desktop Home Screen currently my screen is stretched across the desktop (as below)
( debut theme)
is this possible to change it to include white margins like the supply theme
Alex
That’s the appearance I am going for! Just slightly wider (image attached) Is there a specific code I need to apply to create that look?
using this code, will it Alter my other pages / mobile view?
thank you again for responding
yes please just reduce height add more height
thanks for getting back to me
the height in the photo you provided looks really good. How do I implement the change?
Alex
can you please try this code
#shopify-section-163515292265ed76ba .slideshow-wrapper {
max-width: 1250 px ;
margin: 0 px auto;
}
#shopify-section-163515292265ed76ba .slideshow__image {background-size: contain;}
Although the width is perfect, it only fixed the top banner and not the other elements on the same page. Is there any way to make it all the same?
Alex
yes that code work only top banner doesn’t effect other one
thanks for getting back to me.
Is there anyway to make all elements on the front page that width?
try this
.slideshow-wrapper {
max-width: 1250 px ;
margin: 0 px auto;
}
.slideshow__image {background-size: contain;}
Thanks for getting back to me!
Unfortunately the code is not applying to the page as a whole. The image attach shows the the edited slider. I was hoping to get all other elements in line with the edited banner width. Is this possible for this layout?
try this code
.slideshow-wrapper { max-width: 1200 px ; margin: 0 px auto; }
.image-bar {hidden; max-width: 1200 px ; margin: 0 px auto; }
Thanks for getting back to me.
When I put the latest code in it reverted the settings back to the original setting with the images stretched across the screen
sorry i can’t see code
sorry for the delayed response.
I have put the code in and there is still no difference. Should I be picking another theme to resolve the issue?
Alex