Simple Form Not Showing Properly

Question

I am currently doing the tutorial from Rails Tutorial Instagram and I can't seem to get the Simple Form/Boostrap styling correct.

(CTRL+F for relevant part: I'm still not not super happy with the way this form looks)

Top is from tutorial, bottom is mine:

Here are the relevant files:

My CSS:

body {
  background-color: #fafafa;
  font-family: proxima-nova, 'Helvetica Neue', Arial, Helvetica,
  sans-serif;
}

.navbar-brand {
  a {
    color: #125688;
  }
}

.navbar-default {
  background-color: #fff;
  height: 54px;
  .navbar-nav li a {
    color: #125688;
  }
}

.navbar-container {
  width: 640px;
  margin: 0 auto;
}
.posts-wrapper {
  padding-top: 40px;
  margin: 0 auto;
  max-width: 642px;
  width: 100%;
}
.post {
  background-color: #fff;
  border-color: #edeeee;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
  margin-bottom: 60px;
}
.post-head {
  height: 64px;
  padding: 14px 20px;
  color: #125688;
  font-size: 15px;
  line-height: 18px;
  .thumbnail {}
  .name {
    display: block;
  }
}
.image {
  border-bottom: 1px solid #eeefef;
  border-top: 1px solid #eeefef;
}
.caption {
  padding: 24px 24px;
  font-size: 15px;
  line-height: 18px;
}
.form-wrapper {
  width: 60%;
  margin: 20px auto;
  background-color: #fff;
  padding: 40px;
  border: 1px solid #eeefef;
  border-radius: 3px;
}
.edit-links {
  margin-top: 20px;
  margin-bottom: 40px;
}

My HTML file:

<div class="form-wrapper">
    <%= simple_form_for @post, html: { class: 'form-horizontal', multipart: true } do |f| %>
    <div class="form-group">
        <%= f.input :image %>
    </div>
    <div class="text-center">
        <%= f.input :caption, placeholder: 'Enter caption here' %>
    </div>
    <div class="text-center">
        <%= f.button :submit, class: 'btn-success' %>
        <% end %>
    </div>
</div>

Answer 1

Add .form-group to form inputs for that change your html with following :

<div class="form-wrapper">
    <%= simple_form_for @post, html: { class: 'form-horizontal', multipart: true } do |f| %>
    <div class="form-group">
        <%= f.input :image %>
    </div>
    <div class="form-group text-center">
        <%= f.input :caption, placeholder: 'Enter caption here' %>
    </div>
    <div class="form-group text-center">
        <%= f.button :submit, class: 'btn-success' %>
        <% end %>
    </div>
</div>