Bootstrap CSS misalignments - html

Question

So I have bootstrap downloaded and have the following piece of code.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-3 ">
<image alt="here will be the logo" src=""></image>
</div>
<div class="col-sm-6 ">
</div>
<div class="col-sm-3">
<form class="form-horizontal" >
<div class="form-group row">
<label class="control-label col-sm-4" for="document">Document:</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="revision">Revision:</label>
<div class="col-sm-8">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="pagenr">Page nr:</label>
<div class="col-sm-8">
<input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="iso">ISO:</label>
<div class="col-sm-8">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
Here is the result i get : web page
Now what interests me is 1. the alignment of text inside the forms (for some reason label is positioned higher than the input) and 2. the huge right margin which does not go away whatever i try to do and eats away input space. On a sidenote it's also interesting that making input field 'readonly' makes it perpetually gray.
Here is my css code:
input.form-control{
width: 80%;
padding: 15px 22px;
margin: 5px 5px;
box-sizing: border-box;
font-size: 14px;
height: 10px;
border:0;
background-color: #FFEBCD;
}
header {
padding-top: 20px;
height: 100px;
font-size: 14px;
}
div.container
{
margin-right: 1px;
margin-left: 100px;
padding-right: 1px;
border-right: 1px;
}
div.form-group
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
form.form-horizontal
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
vertical-align: bottom;
}
div.row
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
label.control-label
{
width: 100%;
vertical-align: baseline ;
background-color: CadetBlue;
text-align: left;
}
So none of the vertical or text alignment attributes seem to work nor setting 'right margin' = 1px to any element I can think of.
The Html code I provided only covers the first form, since the whole code would just be twice as big and the problem is obviously the same with second form.

Answer 1

I've edited their code. I hope it's the way you wanted it to be. It's really complicated wrote.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-4 ">
<image alt="here will be the logo" src=""></image>
</div>
<!-- <div class="col-sm-6 ">
</div> -->
<div class="col-sm-8">
<form>
<div class="form-group row">
<label class="col-form-label col-sm-2" for="document">Document:</label>
<div class="col-sm-10">
<input type="email" class="form-control " id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="revision">Revision:</label>
<div class="col-sm-10">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pagenr">age nr:</label>
<div class="col-sm-10">
<input class="form-control" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="iso">ISO:</label>
<div class="col-sm-10">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</header>

Answer 2

Ok,so i did fix the text misallignment by juggling line-height of both form elements until they looked good enought. When you colour the boxes you still see the misalignment though. And right margin was so big because the left was too small if that makes sense