Unsure how to use border-bottom in CSS - html

Question

what I'd like to achieve is a border-bottom 20px below my h1 tag in my sidebar and also have 20px of "white space" below my border-bottom. I'd also like to have this underneath my h1 tag in my content area.
Here's the link to what I have now
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>
<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<h1>News</h1>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
</div>
CSS:
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
position: absolute;
/* # */
height: 100%;
width: 318px;
float: left;
padding-bottom: 20px;
padding-top: 20px;
}
#sidebar h1 {
border-bottom: thick;
border-bottom-width: 75%;
}
.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}
.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0;
width:300px;
}
.sidelink ul {
margin: 0;
padding: 0;
margin-left: 20px;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}
h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}
/* Content */
#content {
width: 642px;
float: right;
padding-top: 20px;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding-right: 25px;
}

Answer 1

Try this and see how you go
#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }

Answer 2

h1 {
border-bottom: 20px solid #000000;
}
AND
h1 {
margin: 0 0 20px 0;
}
OR
h1 {
margin-bottom: 20px;
}
Combine both rules though... So more like this:
h1 {
margin: 0 0 20px 0;
border-bottom: 20px solid #000000;
}

Answer 3

#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
If you want it for all h1
h1 { border-bottom: 20px solid black; margin-bottom: 20px; }

Answer 4

Try this CSS:
div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }