使用内联块时无法水平设置图像

Question

我试图让图像水平格式化有很多试验和错误，但我仍然遇到麻烦。其他人说我需要.hero中的倾斜块，一些答案会完全散布图像。您可能想知道我为什么要使用这么多div。它们用于显示图像周围的边框以及字体真棒图标。

$db = mysqli_connect("localhost", "root", "", "photos");
        $sql = "SELECT * FROM user_images ORDER BY RAND()";
        $result = mysqli_query($db, $sql);
        while ($row = mysqli_fetch_array($result)) {
            echo'<div class="hero">
              <div class="hero-content">
                <div class="row">
                  <div class="social-img hide-750">
                    <div class="social-content">
                      <img class="image-inner" src="profiles/uploads/'.$row["images"].'">
                      <p>Uploaded by: '.$row["username"].'<br><br><br></p>
                      <div class="share">
                        <a href="#" target="_blank"><i class="fa fa-star" aria-hidden="true"></i></a>
                        <a href="#" target="_blank"><i class="fa fa-heart" aria-hidden="true"></i></a>
                        <a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      </div>
                    </div>
                  </div>
                  </div>
                  </div>
                  </div>';
        }

那些保持垂直显示。这是CSS：

    .hero {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9deeee', endColorstr='#008c8c',GradientType=0);
  /* IE6-9 */
  margin-top: -30px;


}
.hero .hero-content {
  margin: -10px auto 0;
  max-width: 1000px;
  padding: 50px 20px 170px;


}
.hero .hero-content h1 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content h2 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 200;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row {
 margin-top: 60px;
}
.hero .hero-content .row .social-img {
  background-color: #f5f5f5;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  float: left;
  margin: 0 20px 80px;
  width: 29%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.hero .hero-content .row .social-img .social-content {
  margin: 10px;
}
.hero .hero-content .row .social-img .social-content img {
  margin-bottom: 10px;
  height:250px;
  width: 100%;
}
.hero .hero-content .row .social-img .social-content p {
  color: #505e67;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row .social-img .share .fa {
  color: #bababa;
  font-size: 20px;
  padding-right: 10px;
}
.hero .hero-content .row .social-img .share .fa.fa-twitter {
  float: right;
}
.hero .hero-content .row .social-img .share .fa.fa-instagram {
  float: right;
}
.hero .hero-content .row .social-img .share .fa:hover {
  color: #f17e6f;
}
@media (max-width: 990px) {
  .hero .hero-content .row .social-img {
    width: 44%;
  }
  .hero .hero-content .row .social-img.hide-990 {
    display: none;
  }
}
@media (max-width: 750px) {
  .hero .hero-content {
    padding: 70px 100px 220px;
  }
  .hero .hero-content .row .social-img {
    margin: 0 0 70px;
    width: 100%;
  }
  .hero .hero-content .row .social-img.hide-750 {
    display: none;
  }
  .hero .hero-content .row .social-img .social-content img {
    max-height: inherit;
  }
}
@media (max-width: 575px) {
  .hero .hero-content {
    padding: 70px 20px 200px;
  }
  .hero .hero-content h1 {
    font-size: 20px;
  }
}

我有什么问题吗？我真的陷入了这个问题。