Page format falls apart when rendering

Page format falls apart when rendering

I created a sample app to play around with rails. I'm having trouble with
the page format of my site when a page is rendered. Please see my site and
just click the button and you'll see what I'm talking about.
Here is my controller:
class BooksController < ApplicationController
def new
@books = Book.new
end
def show
end
def create
@books = Book.new(book_params)
if @books.save
redirect_to new_book_path, :flash => { :success => "Book Added"}
else
render 'new'
end
end
def update
end
def edit
end
def destroy
end
private
def book_params
params.require(:book).permit(:title, :author, :genre, :no_of_items)
end
end
here my views/new.html.erb
<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>
<% flash.each do |key, value|%>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<%= form_for @books do |f| %>
<%= render 'shared/error_message' %>
<p>
<div class="fields">
<%= f.label :title, "Title:"%>
<%= f.text_field :title %><br/><br/>
</div>
<div class="fields">
<%= f.label :author, "Author:" %>
<%= f.text_field :author %><br/><br/>
</div>
<div class="fields">
<%= f.label :no_of_items, "No. of Items:" %>
<%= f.text_field :no_of_items%><br/><br/>
</div>
<div class="fields">
<%= f.label :genre, "Genre:" %>
<%= f.text_field :genre%><br/><br/>
</div>
<p>
<%= submit_tag "Add book"%>
</p>
</p>
<% end %>
</div>
</div>
Can anyone help me tell what's happening and a fix for this? Thanks.