Css 如何在引导中正确对齐？

我试图用React在网格中显示一些json数据。这里我有一些问题

1-我使用了.col-md-4，因为我希望第行有4个元素。正如您所看到的，左侧的空格小于右侧的空格。我给行留了一些空白，但后来我把display:flex改为display:block，这使得容器更糟糕，我把所有的产品都放在一行。如何将其水平对齐

2-当我查看页面并选择移动设备（例如Iphone X）时，我看到所有产品都向左对齐。我可以给左边的边距：10vh；到容器（使用@media screen和（最小宽度：320px）{}），但这是移动视图中对齐它们的正确方法吗

3-递增和递减按钮没有水平对齐，我是否应该给正下方的“p”一个最小高度

4-我已经上传到我的github上了。我应该如何在github上的链接下运行此页面

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

---

嘿，您可以使用这些引导类：

.mx auto//Align items right
.mr auto//Align items left
.ml auto//Align items right

感谢您的回复，它将居中对齐，但即使我使用，一行中也会有6个对象

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;
}