Rails CSS 中央揃え

Question

①上記のカナブンと...を中央に寄せたいです。
しかし、display:flex;等を利用しても中々中央に寄ってくれません。
②画像の大きさを統一したいのですが、各投稿ごとにサイズが変わってしまいます。
大きさを揃えるための手段としてどんなものがあるでしょうか？
zoom等を使用しましたが、解決せず。

#htmlのソースコード

.main
  - @tweets.each do |tweet|
    .mainindex
      .mainleft
        =current_user.name
      .mainright
        %i.fas.fa-ellipsis-h
    .contents
      .content
        = image_tag tweet.image.url

#css

.main{
    padding-top: 80px;
    min-height :100vh;
    width: 100%;
    background-color: rgba(var(--b3f,250,250,250),1);
    .mainindex{
      display: flex;
       margin: 50px auto 0;
       text-align: center;
      .mainleft{
        display: inline;
      }
      .mainright{
        
      }
    }
      .content{
        zoom: 0.5;
        background-color: #fff;
        background-size: 100% auto;
        padding-bottom: 50px;
        text-align: center;
      }
  }

Answer 1

①上記のカナブンと...を中央に寄せたいです。

.mainindex {
  display: flex;
  justify-content: center;
}

---

②画像の大きさを統一したいのですが、各投稿ごとにサイズが変わってしまいます。

まず「zoom」はInternet Explorerにしか効かないプロパティのようです。
http://www.htmq.com/style/zoom.shtml

おそらく<img>タグが出力されていると思うので、その画像に横幅を指定すると、
各投稿ごとの大きさ (横幅) は揃えることができます。

.content img {
  width: 400px; /* 任意のサイズを指定 */
}