Border Applying to Only One Status Instead of Both- Frontend Dev Treebook Project

Hi All,

So I am wrapping up the 'updating index page' section of the treebook project, and I have a issue with the CSS styling at the end of the video. I applied a border to a status class, which is supposed to put the border under each status. For me, it has put two border lines under the bottom of the status page. This is also the case with a hover effect that we work on using coffeescript in a later lesson. In that case, the hover effect applies to both statuses, instead of the one being hovered over. Is this an issue with my status loop? If not, why are these effects applying to both status updates instead of each individually? Cheers! INDEX.HTML.ERB

<div class="page-header">
<h1> All of the Statuses</h1>
</div>

<% @statuses.each do |status| %>
<div class="status">
  <strong><%= status.name %></strong>
<p><%= status.content %></p>
<div class="meta">
  <%= link_to time_ago_in_words(status.created_at) + " ago", status %>
  <span class="admin">
    | <%= link_to "Edit", edit_status_path(status) %> |
    <%= link_to "Delete", status, method: :delete, data: {confirm: "Are you sure you want to delete this status?"} %>
  </span>
</div>
  <% end %>

STATUSES.CSS.SCSS

status {
    border-bottom: solid 1px #CCC;
    padding: 5px 0;
}

.status p{
    margin: 4px 0;
}
.status .admin{
    display:none;
}

.status.hover .admin{
    display:inline;
}

STATUS.JS.COFFEE

$ ->
   $('.status').hover (event) ->
       $(this).toggleClass("hover")