I make gallery by using Bootstrap in React.js. Posts are displays by bootstrap grid system.
All posts are left side but I want make center it. I don't have idea how I make them center.

After justify-content-center

After removing margin: 10px; from .top_post

After removing width: 250px; from .top_post CSS

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

CSS

.top_hello {
  text-align: right;
  margin: 20px 0 0 0;
}

.top_search {
  margin: 20px 0 20px 0;
  justify-content: right;
}

.top_search_input {
  display: flex;
  margin-right: 0;
  margin-left: auto;
}


.top_post {
  /* position: relative; */
  background:lightgreen; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 250px;
  height: 400px;
  margin: 10px;
}

.top_post_photo {
  object-fit: cover;
  width: 200px;
  height: 200px;
}

JSX

<div className="container">
    <div className="row text-center">
        <p className="top_hello">Hello Hiroko!</p>
        <div className="top_search col-12">
            <form className="top_search_input form-inline col-4" onSubmit={handleSubmit(getSearchResult)}>
            <input placeholder="Search Title or Maker" className='form-control' {...register('search', { required: true })} />
            <input className='btn btn-secondary' type="submit" value="Search" />
            </form>
        </div>
        <>
            {post.map((item,i) => (
              <div key={i} className="top_post col-6 col-lg-3">
                <div className="slideshow-container">
                  {item.photo &&
                  <div className="mySlides fade">
                    <img className="top_post_photo" src={item.photo} />
                  </div>
                  }
                  {item.photo2 &&
                  <div className="mySlides fade">
                    <img className="top_post_photo" src={item.photo2} />
                  </div>
                  }
                  {item.photo3 &&
                  <div className="mySlides fade">
                    <img className="top_post_photo" src={item.photo3} />
                  </div>
                  }
                  {item.photo4 &&
                  <div className="mySlides fade">
                    <img className="top_post_photo" src={item.photo4} />
                  </div>
                  }Ï
                  {item.photo5 &&
                  <div className="mySlides fade">
                    <img className="top_post_photo" src={item.photo5} />
                  </div>
                  }
                  <a className="prev" onclick="plusSlides(-1)">❮</a>
                  <a className="next" onclick="plusSlides(1)">❯</a>
                </div>
                <p>Title: {item.title}</p>
                <p>Condition: {item.condition_name}</p>
        
                <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
              </div>
            ))}
    </div>
</div> 

You just need to add justify-content-center class along with row.

codepen