rails ユーザー機能を作ってデザインが変になった。

Question

railsについて質問です。

このように<div>の場所が悪いのか、四角がかさなってしまいます。
ログインしたとき、投稿できる機能をつくって、
その投稿したユーザーしか編集　削除ができるようにしました。

ですが、違うユーザーがその投稿を見た場合、このように四角がかさなって、変な形になってしまいます。

↓index.html.erb

<h2>Twitterフォロー宣伝</h2>
<% if user_signed_in? %> <!-- ユーザーがログインしているか調べる -->
  <!-- ユーザーがログインしていた時の処理 -->
  <%= link_to '新規記事作成', new_post_path , class: 'new'%>
	<% @posts.each do |post| %>
	<div id="box">
	<% if current_user.id == post.user_id %>

	<h2 class="title2"><%= link_to post.title, post_path(post),class: 'title2'%></h2>
	<%= link_to '[編集]', edit_post_path(post) ,class: 'edit' %>
	<%= link_to '[X]', post_path(post) ,method: :delete ,class: 'x' %>
	
	<p><%= post.body %></p>
	
	<time datetime="<%= post.created_at %>">
	<p class="time"><%= time_ago_in_words(post.created_at)%></p>
	</time>
	</div>
	<% end %>
	<% end %>
	
	<% @posts.each do |post| %>
	<% unless current_user.id == post.user_id %>
	<div id="box">
	<h2 class="title2"><%= link_to post.title, post_path(post),class: 'title2'%></h2>
	<p><%= post.body %></p>

	<time datetime="<%= post.created_at %>">
	<p class="time"><%= time_ago_in_words(post.created_at)%></p>
	</time>
	</div>
	<% end %>
	<% end %>

  <!-- ログアウトをする -->
<% else %>
  <!-- ユーザーがログインしていなかった時の処理 -->
   <% @posts.each do |post| %>
    <div id="box">
	<h2 class="title2"><%= link_to post.title, post_path(post),class: 'title2' %></h2>
	<p><%= post.body %></p>
	<time datetime="<%= post.created_at %>">
	<p class="time"><%= time_ago_in_words(post.created_at) %></p>
	</time>
</div>
    <% end %>
	<% end %>


	<style>
	.x:hover{
	color: red;
	background: black;
	}
	.edit:hover{
	color: red;
	background: black;
	}
	.new:hover{
		color: red;
		background: black;
	}
	.time{
		color: #777777;
	}
	.title2,
	.edit,
	.x{
		display:inline-block
	}
	.title2:hover{
		color:red;
		background: black;
	}

	</style>

↓application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.text{
	width: 500px;
}
.body{
	width: 500px;
	height: 500px;
}
#box{
	border: 1px solid 	#444444;
}
.sub:hover{
	color: red;
	background: black;
}
body{
	background: #eeeeee;
}

Comments

[siruku6]

2点質問の修正お願いしたいです。

・1つ画像が表示されていなさそうなこと
　](5ea7b3309d033c2276b3d4ea6f1eb92f.png)
・どこが問題なのか一見してわからない
　「このように<div>の場所が悪いのか、四角がかさなってしまいます。」とあるが、どこがどこに重なっていて、どうしたいのかがよくわかりません。

以上の点を修正すると多少回答が付きやすくなるかと思います。
（もしかしたら、他のソースコードの追加掲載が必要かもしれませんが）

[HTMLdoc]

ホントに申し訳ございませんでした。
これからも気を付けます。
こちらは解決しました。
ありがとうございました。

Answer 1

divの場所がちがかった。
<% @posts.each do |post| %>
<div id="box">
<% if current_user.id == post.user_id %>

を
<% @posts.each do |post| %>

<% if current_user.id == post.user_id %>

<div id="box">にしたら治りました。

Answer 2

<div>の場所が違いました。。