title: css file not working properly on rails 4.2
body: <p>css is not working properly in rails 4.2.5 on implementing home page looks like </p>
  
  <p>the gem file are</p>
  
  <pre><code>gem 'rails', '4.2.5.1'
  gem 'pg'
  gem 'activeadmin', github: 'gregbell/active_admin'
  gem 'devise'
  gem 'sass-rails', '~&gt; 5.0'
  gem 'uglifier', '&gt;= 1.3.0'
  gem 'bootstrap-sass', '3.2.0.0'
  gem 'coffee-rails', '~&gt; 4.1.0'
  gem 'coffee-script-source', '1.8.0'
  gem 'jquery-rails'
  gem 'turbolinks'
  gem 'jbuilder', '~&gt; 2.0'
  gem 'sdoc', '~&gt; 0.4.0', group: :doc
  </code></pre>
  
  <p>my routes are</p>
  
  <pre><code>Rails.application.routes.draw do
    get 'pages/about'
  
    get 'pages/contact'
  
    get 'pages/resources'
  
    devise_for :admin_users, ActiveAdmin::Devise.config
    ActiveAdmin.routes(self)
    resources :categories
    get 'categories/index'
  
    get 'categories/edit'
  
    get 'categories/new'
  
    get 'categories/show'
  
    get 'home/index'
  
    resources :posts
    root 'home#index'
  end
  </code></pre>
  
  <p>my css files are: </p>
  
  <pre><code>    @import "bootstrap-sprockets";
  @import "bootstrap";
  
  body {
   margin: 0;
   padding: 0;
   background: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #6F6F6F;
  }
  strong {
   color: #3F3F3F;
  }
  h1,h2,h3 {
   margin: 0;
   padding: 0;
   text-transform: uppercase;
   font-family: 'Abel', sans-serif;
   font-weight: normal;
   color: #2B2522;
  }
  h1 {
   font-size: 2em;
  }
  h2 {
   font-size: 2.8em;
  }
  h3 {
   font-size: 1.6em;
  }
  p,ul,ol {
   margin-top: 0;
   line-height: 180%;
  }
  ul,ol {
  
  }
  a {
   text-decoration: underline;
   color: #D93544;
  }
  a:hover{
   text-decoration: none;
  }
  
  #wrapper{
   width: 1000px;
   margin: 0 auto;
   padding: 0;
   background: #000000; 
  }
  
  /* Header */
  #header-wrapper {
   height: 120px;
  }
  #header {
   width: 1000px;
   margin: 0 auto;
   padding: 0px 0px 0px 0px;
  }
  
  /* Logo */
  #logo {
   float: left;
   width: 350px;
   margin: 0;
   padding: 0;
   color: #000000;
  }
  #logo h1, #logo p {
  
  }
  
  #logo h1 {
   margin-left: 30px;
   padding: 20px 0px 0px 0px;
   letter-spacing: -1px;
   text-transform: uppercase;
   font-family: 'Abel', sans-serif;
   font-size: 3.8em;
   font-weight: bold;
   color: #D43442;
  }
  
  #logo h1 a {
   color: #D43442;
  }
  
  #logo h1 span {
  
  }
  
  #logo p {
   margin: 0;
   padding: 0px 0 0 32px;
   font: normal 14px Georgia, "Times New Roman", Times, serif;
   font-style: italic;
   color: #BEBEBE;
  }
  
  #logo a {
   border: none;
   background: none;
   text-decoration: none;
   color: #707070
  }
  
  
  /* Search */
  #search {
   float: right;
   width: 280px;
   height: 60px;
   padding: 20px 0px 0px 0px
  }
  
  
  #search form {
   height: 41px;
   margin: 0;
   padding: 10px 0 0 0px;
  }
  
  #search fieldset {
   margin: 0;
   padding: 0;
   border: none;
  }
  
  #search-text {
   width: 170px;
   height: 19px;
   padding: 4px 5px 1px 5px;
   border: none;
   background: #FFFFFF;
   text-transform: lowercase;
   font: normal 11px Arial, Helvetica, sans-serif;
   color: #5D781D;
  }
  
  #search-submit {
   width: 50px;
   height: 26px;
   background: #D93544;
   color: #FFFFFF;
  }
  
  /* Menu */
  #menu {
   float: right;
   height: 125px;
   margin: 0 auto;
   padding: 0;
   background: #D43442;
  }
  
  #menu ul {
   margin: 0;
   padding: 0px 0px 0px 0px;
   list-style: none;
   line-height: normal;
  }
  
  #menu li {
   float: left;
   border-left: 1px solid #000000;
  }
  
  #menu a {
   display: block;
   height: 80px;
   padding: 45px 25px 0px 25px;
   text-decoration: none;
   text-align: center;
   text-transform: uppercase;
   font-family: 'Abel', sans-serif;
   font-size: 26px;
   font-weight: normal;
   color: #FFFFFF;
   border: none;
  }
  
  #menu a:hover, #menu .current_page_item a{
   background: #A32833;
   text-decoration: none;
  }
  
  #menu .current_page_item a {
  
  }
  
  /* Page */
  
  #page {
   width: 980px;
   margin: 0 auto;
   padding: 0px 0px 0px 20px;
  }
  
  #page-bgtop {
   padding: 20px 0px;
  }
  
  /* Content */
  
  #content {
   float: right;
   width: 600px;
   padding: 40px 0px 0px 0px;
  }
  
  .post, .post_full, .page {
   margin-bottom: 30px;
   padding: 30px 20px 20px 20px;
   background: #FFFFFF url (images/page-gradient-bg.png) repeat-x left bottom;
   box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,1);
   outline: 1px dashed #D4D4D4;
   outline-offset: -5px;
  
  }
  
  .post .title, .page .title {
   height: 41px;
   padding: 0px 0px 0px 0px;
   letter-spacing: -1px;
   font-family: 'Abel', sans-serif;
  }
  
  .post .title a, .page .title a {
   text-decoration: none;
   color: #202020;
   border: none;
  }
  
  .post .entry {
   padding: 20px 30px 20px 30px;
   padding-bottom: 20px;
   text-align: justify;
  }
  
  .post .byline {
   clear: both;
   overflow: hidden;
   padding-bottom: 20px;
  }
  
  .post .meta {
   float: left;
  }
  
  .post .links {
   float: right;
  }
  
  /* Full Post */
  .post_full .byline p {
   padding: 0;
   margin: 0;
  }
  
  .post_full .byline {
   clear: both;
   overflow: hidden;
   margin-bottom: 15px;
   padding: 5px;
   background: black:;
   color: #fff;
   border-left: 5px #D93544 solid;
  }
  
  .links a {
  
  }
  
  /* Sidebar */
  
  #sidebar {
   float: left;
   width: 300px;
   margin: 0px;
   padding: 20px 20px 0px 0px;
  }
  
  #sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
  }
  
  #sidebar li {
   margin: 0;
   padding: 0;
  }
  
  #sidebar li ul {
   margin: 0px 0px;
   padding-bottom: 30px;
  }
  
  #sidebar li li {
   line-height: 35px;
   border-bottom: 1px dashed #191919;
   background: url (images/img01.jpg) no-repeat left 15px;
   margin: 0px 20px 0px 20px;
   border-left: none;
   text-align: left;
  }
  
  #sidebar li li span {
   display: block;
   margin-top: -20px;
   padding: 0;
   font-size: 11px;
   font-style: italic;
  }
  
  #sidebar li li a {
   padding: 0px 0px 0px 0px;
  }
  
  #sidebar h2 {
   height: 31px;
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 0px 20px;
   background: url(images/img03.jpg) no-repeat left top;
   text-shadow: #203060 -1px 1px 2px;
   text-align: left;
   text-transform: uppercase;
   letter-spacing: -0.5em;
   font-size: 2em;
   color: #FFFFFF;
  }
  
  #sidebar p {
   margin: 0 0px;
   padding: 0px 20px 20px 20px;
   text-align: justify;
   color: #847F7E;
  }
  
  #sidebar a {
   border: none;
   color: #847F7E;
  }
  
  #sidebar a:hover {
   text-decoration: underline;
   color: #847F7E;
  }
  
  /* Calendar */
  #calender { 
  }
  
  #calender_wrap{
   padding:20px;
  }
  #calender table {
   width: 100%;
  }
  #calendar body td {
   text-align: center;
  }
  #calendar #next {
   text-align: right;
  }
  /footer/
  #footer{
   width: 980px;
   height: 50px;
   margin: 0 auto;
   padding: 0px 0 15px 0;
   font-family: Arial, Helvetica, sans-serif;
  }
  
  #footer p {
   margin: 0;
   line-height: normal;
   font-size: 10px;
   text-transform: uppercase;
   text-align: center;
   color: #847F7E;
  }
  
  #footer a {
   color: 847F7E;
  }
  
  form label{width: 110px; display: inline-block;}
  </code></pre>
  
  <p>looks like this<a href="http://i.stack.imgur.com/3Uktw.png" rel="nofollow">enter image description here</a></p>
  
  <p>want home about contact to be in column form
  and want to remove the header background</p>