Css bootstrap form Rails 3.2 - html

Question

I would have the form in the left, but i obtained the form in the right:
I really don't know what is the problem. Probably some Css is in contrast with bootstrap. I would have the text-field separated (i obtained everything merged)
this is the css of my form:
<div class="container">
<div class="row">
<div class="col-sm-12">
<legend>Mr. Sosa:</legend>
</div>
<!-- panel preview -->
<div class="col-sm-5">
<h4>Add payment:</h4>
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Concept</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="concept" name="concept">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-3 control-label">Amount</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="amount" name="amount">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-9">
<select class="form-control" id="status" name="status">
<option>Paid</option>
<option>Unpaid</option>
</select>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="date" name="date">
</div>
</div>
</div>
</div>
</div>
Do you have any idea? thank you
application.css.scss
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 4em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Use Font Awesome icons (default)
To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
=require twitter-bootstrap-static/fontawesome
*/
sign_in.css
body, html {
height: 100%;
background-repeat: no-repeat;
}
h2 {
font: small-caps 40px/40px "Times New Roman",serif;
text-align: center
}
.card-container.card {
margin-left: 310px;
max-width: 370px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 600;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

Answer 1

Try using normalize.css and reset.css and see if that makes a difference.
Also go to your browser and inspect element on the form container and see where its getting its align property from?(this will help you identify where the style is applied and so you can try tweaking it in the browser itself first)