How can I have just 1 column on the store page?

Hello, 

I would like to have just one column on a store page and I was able to achieve it with the code below but the items have no spacing between them. I tried increasing the margin but that didn't add any space.

The code I used:

<style>

  @media screen and ( min-width: 768px ) {
  
    .products.collection-content-wrapper .list-grid {
    
      display : block;
      margin : 0 20vw;
      
      }
    }
    
  </style>

You can do this 1 column without using code

First, edit Shop Page

Click Mobile icon (If you want to adjust on mobile, and click PC icon to edit desktop view) > Edit Section

and change number here