Remove collection list side padding and gap between collections

Store Design
,
1

Hello everyone, I’m using the Studio Theme.

I would like the collection list padding on both sides removed so that it occupies the entire width of the screen. I have already coded for the collections to occupy 50% of the screen, but I am now realizing that I only want the gaps in between the grids and the padding on the sides removed. Having 2-4 collections in one line isn’t possible with the code.

My site is Street Smarts and the password is smarts.

I thought it got fixed with the first collection list, but I am now realizing that the 0px margins on either side weren’t integrated on ALL collection lists.

Screen Shot 2023-02-18 at 9.55.02 PM.png
Screen Shot 2023-02-18 at 9.55.02 PM.png2560×1374 496 KB

And then, I added another collection and hoped that I could add all 3 collections in one line and realized that it followed the 50% width. I just wanted to remove the gaps and margins outside and I realized putting a specific percentage for each collection image to occupy was a wrong move. This is what it looks like:

Screen Shot 2023-02-18 at 9.55.15 PM.png
Screen Shot 2023-02-18 at 9.55.15 PM.png1112×1170 238 KB

This is the code I added to the theme.liquid file:

<style data-shopify="">
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0px;
padding-left: 0px;
}

@media screen and (min-width:750px) {
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0px;
padding-left: 0px;
}
}
</style>

Here’s the code in the section-collection-list.css:

<style data-shopify="">
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0px;
padding-left: 0px;
}

@media screen and (min-width:750px) {
.section-template--17894506529061__44d5075b-dd08-44a9-b967-0927b8808030-padding {
padding-right: 0px;
padding-left: 0px;
}

}
</style>

Thank you!