Why isn't there an option to globally align/make a gutter for everything?

I love the design of Squarespace and the service, BUT I am having some fundamental issues with it. 

I want a very strict and modern look, kinda like tables, where everything is aligned more consistently and things line up. Sort of like https://www.polestar.com/ or https://www.norgram.co/ 

The big problem for me has been the overall gutter/padding of the sites. I tried changing the site margin to 12vw, and that worked until I tried it out on different screen sizes. Now I reset it to default, 4vw and a page width of 1400px. 

It came to point, where for some reason, the blog-sections of the site had different padding than the rest of the website, and I had to insert this code:

/* Desktop blog padding */
@media screen and (min-width:768px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: 0;
    padding-right: 0;
}
}
@media screen and (min-width:768px) and (max-width:1400px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: var(--sqs-site-gutter);
    padding-right: var(--sqs-site-gutter);
}
}

Insofar, the code above helped a lot of problems, but I am still dealing a lot with problem, especially when screens get bigger. 

Some similar problems I am facing:

• When I add background to a text section, the box doesn't align with the rest of the site. Here is an example: https://reload.dk/case-stories/information
• The menu (which I got from Ghost plugins) does not align with the menu, like it should)
• In general, there are some weird jumps between screen sizes when I scale the browser window. I wish they were more fluid, but the breakpoints are really noticable... People on 13" macbooks really notice this. 

The link to the site (which is live): www.reload.dk 

The two attached photos showcase two of the problems:
1) menu text isn't aligned with the hamburger icon
2) background section of the text doesn't align with rest of the page. I chose inset, but still way to wide on a bigger screen. 

And just to clarify, the background image-alignment issues is a site-wide issue for me. I use the "background" function a lot to make boxes in articles etc. So I don't want to make it for each and every section ID that is on the website, if possible. 

Have you found a solution yet?

<

On 3/5/2023 at 3:21 AM, tuanphan said:

Have you found a solution yet?

Not a perfect solution, but I did manage to make a lot of padding to different types of content block like:

/* Desktop blog padding */
@media screen and (min-width:768px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: 0;
    padding-right: 0;
}
}
@media screen and (min-width:768px) and (max-width:1400px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: var(--sqs-site-gutter);
    padding-right: var(--sqs-site-gutter);
}
} 

And that fixed some of it to an extent. Then I added this to make sure, that the backgrounded text boxes, summary boxes would align better: 

 

body[id*="item-"] .sqs-block.accordion-block {
  margin-left: 17px;
  margin-right: 17px;
}

body[id*="item-"] .sqs-block.html-block.sqs-background-enabled {
  margin-left: 17px;
  margin-right: 17px;
}

body[id*="item-"] .sqs-block.summary-v2-block {
  margin-left: 17px;
  margin-right: 17px;
} 

Right now I am left with this problem, but once this is fixed, I am at a place where the solution is OK for me: 

But I am still curious about why the site from the get go doesn't have a max width that everything adheres to... I put in max width in the design styles, but some stuff, like summary boxes and text backgrunds, don't care about that. Also I experienced a lot of problem with blogs and events having extra padding and not aligning with the menu. 

I know this isn't a place to complain about the general product that is Squarespace - and I am happy with Squarespace. I just wonder...