How to make shop categories stacked? + make line underneath full width.

Site URL: https://mahalavi.squarespace.com

Site URL: https://mahalavi.squarespace.com

web password: maha

Hello!
1. Does anyone know how I can make the shop categories stacked here?

2. I'd also like the line underneath to be full black and to be full width. 

3. I'd also like the categories to be centred in the section. 

I have attached a picture of how I would like it to look! I'd like this for mobile also. 

Add these code on Design > Custom CSS

[data-section-id="6295eddcc46ed1075c8723a5"] {
  section.products{
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    .products-flex-container{
      max-width: 1600px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      padding-left: 3vw !important;
      padding-right: 3vw !important;
    }
  }
  
  .nested-category-children{
    flex-direction: column !important;
    li{
      justify-content: center !important;
      span{
        display: none !important;
      }
    }
  }
  .nested-category-children:after {
    opacity: 1 !important;
  }
}

If you want like this(see the image) then add these code 

[data-section-id="6295eddcc46ed1075c8723a5"] {
  section.products{
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    .products-flex-container{
      max-width: 1600px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      padding-left: 3vw !important;
      padding-right: 3vw !important;
    }
  }
  
  .nested-category-children{
    flex-direction: column !important;
    margin-bottom: 0 !important;
    li{
      justify-content: center !important;
      span{
        display: none !important;
      }
    }
  }
  .nested-category-children:after {
    opacity: 1 !important;
  }
}