How to center three divs horizontally within a parent div? [duplicate]

Answer 1

You can do that quite simple using flexbox:

#container {
/*     margin-top: 500px; */
  width: 1000px;
  margin: 0 auto;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
    width: 200px;
    height: 150px;
    border-radius: 15px;
    margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
    text-decoration: none;
}

}
#container {
    width: 1000px;
}

.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
    width: 200px;
    height: 150px;
    border-radius: 15px;
    margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
    text-decoration: none;
}
.box {
  margin-right: 10px;
    width: 230px;
  height: 300px;
  }

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

        
Here's what you'll do!
        

        

          
            
            
Constructing amazing fossils you never even dreamed of
          
          
          

          
            
            
Studying ancient marine biology
          
          
          

          
            
            
Uncovering the world's greatest mysteries