Beyondspace

I believe that this code makes your products smaller with only 80% of width. So they are not at aligned center.

Try removing this code or add the following code to overwrite the one one
.products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 100%; } Support me by pressing 👍 or marking as solution if this is useful for you

It is weird but the summary block causes this problem
You can try adding to Home > Design > Custom Css to fix it
.fe-block.fe-block-yui_3_17_2_1_1658725805925_978232 .summary-item-list { overflow: hidden; } Support me by pressing 👍 or marking as solution if this is useful for you

You can try the following code on Home > Design > Custom Css
section[data-section-id="62fa9cc05c65162ba1cd5d9f"] .list-item-content__description { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } You can change the hex color code as you wish
Support me by pressing 👍 or marking as solution if this is useful for you

You can try the following code on Home > Design > Custom Css
.keeptogether { display: flex; justify-content: center; align-items: center; } Support me by pressing 👍 or marking as solution if this is useful for you

You can try the following code on Home > Design > Custom Css to fix it
.arrow-child.preFade + .custom-arrow.arrow-child { opacity: 0; transition-property: opacity; transition-timing-function: ease; transition-duration: 1.5s; transition-delay: 0.167647s; } .arrow-child.preFade.fadeIn:not([data-override-initial-global-animation]) + .custom-arrow.arrow-child { opacity: 1 ; } Support me by pressing 👍  or marking as solution if this useful for you

Try adding on Home > Design > Custom Css
@media only screen and (max-width: 767px) { section[data-section-id="628bec2ea6599d4d7fc49962"] { visibility: hidden; height: 300px; } section[data-section-id="628bec2ea6599d4d7fc49962"]:before { visibility: visible; content: 'Kindly view on your desktop/computer'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } } Support me by pressing 👍  or marking as solution if this useful for you

My testing

We can have a trick to set the link cover each item (include image + description)
section[data-section-id="63efb9a9a138382a67465a16"] .list-item-content__button:after { content: ''; display: block; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; } section[data-section-id="63efb9a9a138382a67465a16"] .user-items-list-simple .list-item-content__button-container { position: static; } section[data-section-id="63efb9a9a138382a67465a16"] .list-item { overflow: hidden; position: relative; } Support me by pressing 👍  or marking as solution if this useful for you

You can try adding to Home > Design > Custom css
body[id*="item-"] .sqs-block.accordion-block { margin-left: 17px; margin-right: 17px; } body[id*="item-"] .sqs-block.summary-v2-block { margin-left: 17px; margin-right: 17px; } Support me by pressing 👍  or marking as solution if this useful for you

You can try adding to Home > Design > Custom Css
.ProductItem-relatedProducts .product-price { display: none; } Support me by pressing 👍  or marking as solution if this useful for you

My testing

You can try adding to Home > Design > Custom Css
[aria-label="Shopping Cart"]:after { content: 'Quote'; visibility: visible; position: absolute; left: 0; top: 0; } [aria-label="Shopping Cart"] { visibility: hidden; position: relative; } [aria-label="Checkout"]:after { content: 'Submit for Quote'; visibility: visible; color: #ccc; padding: 1.2rem 2.004rem; background-color: var(--primaryButtonBackgroundColor); position: absolute; right: 0; } [aria-label="Checkout"] { visibility: hidden; position: relative; } Support me by pressing 👍  or marking as solution if this useful for you

You can try adding to Home > Design > Custom Css
.portfolio-hover-items-list { background-color: var(--tweak-text-block-background-color); border-radius: 5px; } .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title { color: #fff; } .portfolio-hover-items { z-index: 9; } Support me by pressing 👍  or marking as solution if this useful for you

You can try adding to Home > Design > Custom Css
.header-display-desktop .header-nav-list > .header-nav-item.header-nav-item--collection:last-child { position: absolute; right:0; } Support me by pressing 👍  or marking as solution if this useful for you

My testing

Can you share your URL so I can take a look?

With the basic css code for personal plan, You can try the following trick
1. Add an image block which allow you to add a link on it, so you can click on it to direct to the page you want
 
2. Make it small on editor

3. Use the following code on Home > Design > Custom Css to spin and scale your image block
#block-yui_3_17_2_1_1676381170030_3394 { animation: 1s forwards appear; } @keyframes appear { from { transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); } to { transform: scale(6) rotate(-360deg); -webkit-transform: scale(6) rotate(-360deg); } }  
#block-yui_3_17_2_1_1676381170030_3394 is the image block that you can use the following extension  to get it: Squarespace ID Finder
How to get block id: https://recordit.co/kUIH4uco0b
Press 👍 or mark this answer as solution to help another one too

You can use this additional code
.blog-meta-item.blog-meta-item--tags { display: flex; justify-content: center; } Support me by pressing 👍  or marking as solution if this useful for you

You can use the following code to make a simple text on your header
header:before { content:'Representation | Sarida Bossoni.\a welcome@saridabosssoni.com \a +41 79 279 11 99 \a Website | Instagram \a \a \a Direct\a contact@aaronmarkusgraf.com \a +41 76 467 94 81\a Imdb | Vimeo | Instagram'; white-space: pre; color: #fff; text-align: right; display: block; position: absolute; right: 30px; top: 30px; } Support me by pressing 👍  or marking as solution if this useful for you

Yes, you can combine with id page to set this style only on index page
#collection-5978dcf21b631bbb72eb3861  #header { flex-wrap: wrap; } #collection-5978dcf21b631bbb72eb3861  #header:after { content:'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos quisquam dignissimos libero recusandae voluptate eveniet dolorum delectus. Earum, quisquam saepe et deleniti fuga provident laudantium aperiam recusandae in fugit voluptatibus.'; width: 100%; color: #000; font-size: 20px; font-family:'arial'; }  

You can try adding to Home > Design > Custom Css
.title--description-position-over-image.title-background .title-desc-wrapper.has-main-image .page-title-wrapper { display: none; } .banner-image { position: relative; } .banner-image img { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; } Press 👍 or mark this answer as solution to help another one too

Try adding to Home > Design > Custom Css
.title-desc-wrapper.has-main-image { display: none; }  
Support me by pressing 👍  or marking as solution if this useful for you

Try adding to Home > Design > Custom Css
.header-burger { visibility: hidden; pointer-events: none; } Support me by pressing 👍  or marking as solution if this useful for you

You can try the following code
section[data-section-id="629c8614ba24eb3bd49cb5a5"] .blog-item .blog-basic-grid--text { position: relative; display: flex; flex-direction: column; } section[data-section-id="629c8614ba24eb3bd49cb5a5"] .blog-item .blog-basic-grid--text .blog-more-link { position: relative; display: block; bottom: -4rem; left: 0; flex-grow: 1; } Support me by pressing 👍  or marking as solution if this useful for you

You can try adding to Home > Design > Custom Css
.fe-block.fe-block-e199f745081949f0e8d7 { position: sticky; top: 20px; } Press 👍 or mark this answer as solution to help another one too