Как правильно выровнять в бутстрапе?

Я пытаюсь отобразить некоторые данные json в сетке с помощью React. Вот у меня проблемы,

1- Я использовал .col-md-4, так как хочу, чтобы в строке было 4 элемента. Как видите, расстояние на левой стороне меньше, чем на правой. Я оставил отступ для ряда, но затем мне пришлось изменить display: flex на display: block, и это сделало контейнер еще хуже, у меня все продукты были в одной строке. Как правильно выровнять его по горизонтали?

2-Когда я просматриваю страницу и выбираю мобильные устройства (например, Iphone X), я вижу, что все продукты выровнены по левому краю. Могу дать margin-left: 10vh; в контейнер (с @media screen и (min-width: 320px) {}), но правильно ли выровнять их для просмотра на мобильных устройствах?

3. Кнопки увеличения и уменьшения не выровнены по горизонтали. Следует ли указывать минимальную высоту для «P» чуть ниже?

4- Я загрузил его на свой гитхаб. Что мне делать, чтобы запустить эту страницу на github по ссылке? https://github.com/rahman23/shoppingdemo.github.io

5- Есть ли какие-нибудь советы или улучшения, которые Вы можете мне дать?

Здесь вы найдете весь код

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ProductInfo from '../plist.json'


class Products extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleIncerement() {
    this.setState({
      count: this.state.count + 1
    });
  }

  handleDecrement() {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (

        <div className = "container">
          <div className = "row ">
            {ProductInfo.map((postDetail, index) => {
              return (


                  <div className = "col-md-4">

                    <a href = "require(`${postDetail.url}`)"><img className = "productpic" src = {require(`./${postDetail.image}`)} /></a>
                    <h2 className = "display-6"> <a href = "{postDetail.url}">{postDetail.name}</a></h2>
                    <p className = "h4">{postDetail.price}</p>
                    <p>{postDetail.description}</p>
                    <div className = "counter">


                        <button className = "btn btn-info" onClick = {() => this.handleIncerement()}>+</button>
                        <div>{this.state.count}</div>
                        <button className = "btn btn-info" onClick = {() => this.handleDecrement()}>-</button>

                    </div>
                  </div>

              )
            })}
          </div>
        </div>

    )
  }
}

export default Products

и вот мой файл Css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


}
.bg-light{
  background-color: #daeee4 !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

a .nav-link{
  font-size:4rem;

}

.form-control{
  width:50vh !important;

}

#logo{

  height:5rem;

}
.nav-item{
  font-size:2rem;
}
.row{
  margin-top:10vh;
  margin-bottom:5vh;
}
.row blockquote,p, h2{

  text-align: center;
  font-size:0.9rem;


}

.col-md-4{

  max-width:30vh !important;
  display: block;
  margin:0 4vh 7vh 0;  
  padding:5vh 0 5vh 0;
  -moz-box-shadow:    1px 1px 4px 4px #ccc;
  -webkit-box-shadow: 1px 1px 4px 4px #ccc;
  box-shadow:         1px 1px 4px 4px #ccc;


}
a{
  text-decoration: none;
  color:rgb(99, 110, 114) !important;
}
.productpic{
  width:150px;
  height:150px;
  border-style: ridge;
  border-width: thin;
  margin: auto;
  display: block;

}
.display-6 a:link{
    text-decoration: none !important;    
    color:lightgray !important;
}

.display-6 a:hover{
  color:#161616 !important;

  font-weight:650 !important;
}

.container{
  margin:auto;
  padding:0;
}

.blockquote{
  font-size:0.8rem !important;
  max-width:25vh;
  text-align:center;

}
.counter{
  text-align:center;
  display:block;

}

.shadow {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);

}
.shadow :hover {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.shadow-nohover {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.box {
  background: darkcyan;
  border-radius: 0.3rem;
  height: 10rem;
  width: 10rem;
}