新規投稿時に一覧表示させるとビューのレイアウトが追加される

前提・実現したいこと

現在、家計簿のアプリケーションを作成しており、入力フォームから送信されたデータを一覧ページに出力しようとした時に新たに要素が追加されます。(以下のように)
収入と支出を一覧表示させたいです。

https://gyazo.com/0d2609497558606cd3797ad3d1ce6ffd

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ruby
1div class="post-content">
2  <% @income.each do |income| %>
3  <% @spending.each do |spending| %>
4  <div class="left-content">
5    <div class="income-title"><%= "#{current_user.name}さんのの収入" %></div>
6      <div class="income-post-content">
7        <div class="post-list">
8          <div class="post-date">
9            <%= income.date %>
10          </div>
11          <div class="post-category">
12            <%= income.category %>
13          </div>
14          <div class="post-price">
15            <%= income.price %>
16          </div>
17          <div class="post-memo">
18            <%= income.memo %>
19          </div>
20        </div>
21      </div>
22  </div>
23  <div class="center-content">
24  </div>
25  <% end %>
26  <% end %>
27  <div class="right-content">
28  </div>
29</div>

css
1.post-content {
2  width: 100vw;
3  height: 100vh;
4  display: flex;
5}
6
7.post-list {
8  border: 5px solid #20b2aa;
9  width: 50%;
10  margin-top: 5px;
11}
12
13.left-content {
14  width: 30vw;
15  height: 100vh;
16  border: 2px solid #eee;
17  border-top: transparent;
18  float: left;
19}
20
21.income-title {
22  font-size: 20px;
23  text-align: center;
24  width: 100%;
25  margin-top: 5px;
26  border-bottom: 3px solid #eee;
27  text-decoration: none;
28  height: 50px;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.post-user-name {
35  text-decoration: none;
36}
37
38.center-content {
39  width: 30vw;
40  height: 100vh;
41  border: 2px solid #eee;
42  border-top: none;
43}
44
45
46.right-content {
47  width: 40vw;
48  height: 100vh;
49  border: 2px solid #eee;
50  border-top: transparent;
51}
52  
53
54

試したこと

each文の位置や、cssのプロパティを調べたのですが、なかなか見つけきらず、ご教示いただけると幸いです。
初心者ですが、よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

scivola

2021/03/23 12:14

やりたいことをもう少し具体的に書いていただけると答えに繋がると思います。以下のようなことですね。「収入と支出を一覧表示」は，具体的にどんなふうに並ばせたいのか。 @income と @spending はそれぞれ何か（コントローラーのコードを示せばいいと思います）ビューのコードをみておかしいと思うのは，@income と @spending の二重ループのところですね。@income のループの中に @spending のループがありますが，その中では spending の値を全く使っていません。これだと @spending の数ぶん同じ income の情報が繰り返し表示されるだけです。

branchpeach

2021/03/23 13:18

ご回答、ご指摘ありがとうございます。確かにわかりやすくもっと具体的に書くべきでした。勉強になります、ありがとうございます。問題は以下のようにして解決されました。 <div class="left-content"> <div class="title"><%= current_user.name %>さんの支出</div> <div class="post-list-content"> <% @spending.each do |spending| %> <ul class="post-list"> <li class="post-list-data-date"><%= spending.date %></li> <ul> <li><%= link_to '詳細', spending_path(spending.id), class:"link_pass" %></li> <li><%= link_to '編集', edit_spending_path(spending.id), class:"link_pass" %></li> <li><%= link_to '削除', spending_path(spending.id), class:"link_pass", method: :delete %></li> </ul> <li class="post-list-data"><%= spending.category %></li> <li class="post-list-data"><%= image_tag 'money.png', size: '50x50' %>¥<%= spending.price %></li> </ul> <% end %> </div> ＠incomeと＠spendingを続けて書いていることが原因でした。