page layout design usng bootstrap css - html

Question

I am trying to create standard responsive page using bootstrap css. Just created simple page with header, page content and side links. I have few doubts here.
I put 4% margin for all 4 side, but even why top and botton margin less compare to left right?
Why there is much distance between well and page-header?
I took hr for link seperation, why it is taking so much distance between each?
Can I set all border color to #27ae60
Link to fiddle - http://jsfiddle.net/karimkhan/EjFjr/1/
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="well">
Welcome ...!
Get you timeline info ...
</div>
<div class="page-header">
<h1>
<small>Get purified for all desease</small>
</h1>
</div>
<table border="0" width="100%">
<tr>
<td style="width:75%" valign= "top">
<p> Triaenops menamena is a bat in the genus Triaenops found on Madagascar, mainly in the drier regions. It was known as Triaenops rufus until 2009, when it was discovered that that name had been incorrectly applied to the species. Triaenops rufus is a synonym of Triaenops persicus, a closely related Middle Eastern species. Triaenops menamena is mostly found in forests, but also occurs in other habitats. It often roosts in large colonies and eats insects such as butterflies and moths. Because of its wide range, common occurrence, and tolerance of habitat degradation, it is not considered to be threatened </p>
</td>
<td style="width:25%" valign= "top">
<ul id="newStuff" class="nav nav-tabs nav-stacked">
<li style="display: block;">2 column Google maps, foursquar..</li><hr class="line1">
<li style="display: block;">spsr..</li><hr class="line1">
<li style="display: block;">Bootstrap 3 Control Panel..</li><hr class="line1">
<li style="display: block;">twests..</li><hr class="line1">
<li style="display: block;">Interdev..</li>
</ul>
</td>
</tr>
</div>
</div>
</div>

Answer 1

Additionally to the scarecrow's answer,
You can use Chrome Developer tools (even IE/Firefox has the same options) to see what is happening with your layout, for yourself
Open your web page in Chrome Browser
Press F12
Select Magnifying glass on Chrome developer tools window Top Left corner
Hover/Select the element you need to inspect.
Then check the right side panel of the Developer tools window, you can see what are the styles applied to the selected element (Styles tab), and what are the final values applied to the object (Computed tab) + more

Answer 2

You have set margin as 2% and it is working as intended. Double check with firebug to see the margin.
The space between .well and .page-header is because of the default css of those elements. This is the original css of page-header. See the margin property
.page-header
{
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
Same is the reason for hr. This is the original css
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
Yes you can. Just apply the border-color: #27ae60 style to an element that encloses all the other elements or the body element

Answer 3

Yes, first of all, use development tools
From using it, i have some answers for you
1) if you talk about .container , do not use margin and width at the same time ... use only margin and let the width to expand the whole page (default div)
2) the .page-header has inside a h1, which has its own top-bottom margins
3) same as for 2)
4) body {border-color: #27ae60}