投稿内容の文字を横書きにしたい　scss

お世話になっております。

タイトル通り、twitterのような投稿サイトのデモを作成しており、投稿内容がバグで縦書きになってしまっています。

横書きにして見やすいようにしたいのですが、どのscssファイルのどこの箇所を直せば良いか分からず、また横書きにするにはどのように訂正すれば良いか検索してみたのですが、未だ分からずでここで質問させて頂きました。

現状、以下の写真のようになっております。

scssのコードを添付させて頂きます。

posts.scss

/* posts/index ================================ */
.posts-index-item {
    padding: 20px 30px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 2px 6px #c1ced7;
  }
  
  .post-left img {
    width: 50px;
    height: 50px;
    border-radius: 40%;
    box-shadow: 0 2px 6px #c1ced7;
    object-fit: cover;
  }
  
  .post-user-name a {
    font-weight: 600;
  }
  
  .post-user-name a:hover {
    color: #3ecdc6;
  }
  
  .post-left {
    float: left;
    width: 10%;
  }
  
  .post-right {
    float: left;
    width: 90%;
    padding-left: 25px;
    text-align: left;
  }
  
  /* posts/show ================================ */
  .posts-show form {
    display: inline;
  }
  
  .posts-show-item {
    padding: 30px;
    background-color: white;
    box-shadow: 0 2px 6px #c1ced7;
    overflow: hidden;
  }
  
  .posts-show-item img {
    width: 60px; 
    height: 60px;
    border-radius: 40%;
    box-shadow: 0 2px 6px #c1ced7;
    vertical-align: middle;
    object-fit: cover;
  }
  
  .posts-show-item .post-user-name a {
    vertical-align: middle;
    font-size: 24px;
    margin-left: 15px;
  }
  
  .posts-show-item p {
    font-size: 24px;
    margin: 20px 0;
  }
  
  .post-time {
    color: #8899a6;
    margin-bottom: 10px;
  }
  
  .like-btn {
      color:#8899a6;

  }

  .like-btn-unlike{
      color:#ff2581;

  }

  .posts-show-item .fa{
      font-size: 16px;
      margin-right: 3px;
  }

  
  .post-menus {
    float: right;
  }
  
  .post-menus a, .post-menus input {
    color: #8899a6;
    text-decoration: underline;
    font-size: 14px;
  }
  
  /* posts/new ================================ */
  .posts-new textarea {
    font-size: 20px;
    padding: 10px;
    min-height: 140px;
    border: 1px solid rgb(216, 218, 223);
    resize: none;
  }
  
  .posts-new textarea::-webkit-input-placeholder {
    font-size: 24px;
    opacity: 0.5;
  }

user.scss

/* users/index ================================ */
.users-heading {
    font-weight: 300;
    margin: 60px 0 20px;
    font-size: 48px;
    color: #bcc8d4;
  }
  
  .users-index-item {
    padding: 20px 30px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 2px 6px #c1ced7;
    display: table;
    width: 100%;
  }
  
  .user-left img {
    width: 50px;
    height: 50px;
    border-radius: 40%;
    box-shadow: 0 2px 6px #c1ced7;
    object-fit: cover;
  }
  
  .user-name a {
    font-weight: 600;
  }
  
  .user-name a:hover {
    color: #3ecdc6;
  }
  
  .user-left {
    float: left;
    width: 10%;
  }
  
  .user-right {
    width: 90%;
    padding-left: 25px;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
  }
  
  /* users/show ================================ */
  .user-show {
    text-align: center;
  }
  
  .user {
    margin-bottom: 20px;
  }
  
  .user img {
    width: 80px;
    height: 80px;
    border-radius: 40%;
    box-shadow: 0 10px 6px #c1ced7;
    margin: 40px 0 30px;
    object-fit: cover;
  }
  
  .user h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }
  
  .user p {
    font-size: 13px;
    margin-bottom: 15px;
  }
  
  .user a {
    color: #8899a6;
    text-decoration: underline;
    font-weight: 200;
  }
  
  .user span {
    color: #afb6bf;
    font-weight: 200;
    padding: 0 6px 0 8px;
  }
  
  .user-tabs {
    margin-top: 40px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 2px 6px #c1ced7;
  }
  
  .user-tabs li {
    float: left;
  }
  
  .user-tabs li.active {
    border-bottom: 6px solid #e0ca4d;
  }
  
  .user-tabs li.active a {
    color: #57575f;
  }
  
  .user-tabs a {
    display: inline-block;
    padding: 16px 30px;
    color: #afb6bf;
  }
  
  /* users/new, users/edit ================================ */
  .users-form input {
    margin-bottom: 15px;
  }

users/show.html.erb

<div class ="main user-show">
 <div class= "container">
  <div class= "user">
  <%= image_tag "/#{@user.image_name}" %>
   <h2><%= @user.name %></h2>
   <p><%= @user.email %></p>
   <% if @user.id == @current_user.id %>
   <%= link_to("磨き", "/users/#{@user.id}/edit") %>
   <% end %>
   </div>

   <ul class="user-tabs">
    <li class= "active"><%= link_to("応援投稿","/users/#{@user.id}") %></li>
    <li><%= link_to("それって、最高（いいね）", "/users/#{@user.id}/likes") %></li>
    </ul>

    <% @user.posts.each do |post| %>
      <div class= "posts-index-item">
       <div class= "post-left">
        <%= image_tag  "/#{post.user.image_name}" %>
        <div class="post-right">
         <div class= "post-user-name">
         <%= link_to(post.user.name, "/users/#{post.user.id}")%>
         </div>
         <%= link_to(post.content, "/posts/#{post.id}") %>
         </div>
         </div>
         <% end %>
         </div>
</div>

posts/show.html.erb

<div class="main posts-show">
<div class="container">
    <div class="posts-show-item">
     <div class="post-user-name">
     <%= image_tag  "/#{@user.image_name}" %>
     <%= link_to(@user.name, "/users/#{@user.id}") %>
        </div>
      <p>
      <%= @post.content %>
      </p>
      <div class="post-time">
      <%= @post.created_at %>
      </div>
       <% if Like.find_by(user_id: @current_user.id, post_id: @post.id) %>
         <%= link_to("/likes/#{@post.id}/destroy",{method: "post"}) do %>
          < span class= "fa fa-heart like-btn-unlike"></span>
          <% end %>
      <else>
      <%= link_to("/likes/#{@post.id}/create",{method: "post"}) do %>
           <span class= "fa fa-heart like-btn"></span>
           <% end %>
      <% end %>
           
           <%= @likes_count %>
       <% if @post.user_id == @current_user.id %>
      <div class="post-menus">
       <%= link_to("応援を強化する", "/posts/#{@post.id}/edit") %>
       <%= link_to("応援をやめちゃう", "/posts/#{@post.id}/destroy", {method: "post"}) %>
       </div>
       <% end %>
       

    </div>
  </div>

宜しくお願い致します。

何か足りない情報があれば、仰って頂ければと思います。

kameoman

2021/08/13 13:50

お疲れ様です。お役に立てたらと思い確認しました。 SCSSだけでは私には難しいです???? HTMLでどのクラスを付けているか確認できなければ、修正のご提案できません。 HTMLも貼り付けてみてください。

yoshidesu

2021/08/13 13:56

ありがとうございます！ HTMLも添付させて頂きます。

kameoman

2021/08/13 14:14 編集

<div class= "posts-index-item"> <div class= "post-left"> <%= image_tag "/#{post.user.image_name}" %> <div class="post-right"> <div class= "post-user-name"> <%= link_to(post.user.name, "/users/#{post.user.id}")%> </div> <%= link_to(post.content, "/posts/#{post.id}") %> </div> </div> 上記のインデントが取れていなくてわかりません。整理してみてください！またそれで変わるかもしれません！

yoshidesu

2021/08/15 10:40

インデント揃えてみましたが、未だ改善されずです。。