Responsive box with border lines - html

Question

I am trying to make this exact box with borders lines. you can see after H2 there is new border line and then a paragraph. Please tell me how do I make this? as when I do it with border-bottom:1px solid it just makes a lines but doesn't touch the edges of the main border. here I am attaching the image so you can better understand this here you can see image
my code
<div class="col-sm-8 col-sm-offset-2" id="house">
<h3 class="text">Our house packages include:</h3>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>‘Classic’ range of inclusions</li>
</ul>
<img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
</div>
</div>
CSS
#house {
border: 1px solid black;
background:white;
}
#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}
#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;
}
#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}
please tell me how do I make border lines after heading and after list. please take a look into image. It should be responsive.
thank you all

Answer 1

I think your code is missing one div tag on the top, so I'm not able to debug. :/
But this is how I'd solve it if I had to do the same thing:
<style>
html {
background: #EEE;
width: 100%;
height: 100%;
border: 0;
text-align: center;
padding: 40px;
box-sizing: border-box;
color: #AAA;
font-family: calibri;
}
.box{
background: #FFF;
border: 2px solid #DDD;
width: 80%; /*SPECIFY WIDTH HERE*/
display: inline-block;
}
.heading {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
text-size: 30px;
font-size: 30px;
box-sizing: border-box;
display: inline-block;
}
.content {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.footer {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.myList {
display: inline-block;
text-align: left;
padding: 10px;
}
li {
margin: 10px 0;
}
.myImg {
display: inline-block;
padding: 10px;
}
.houseImg {
width: 300px;
}
</style>
<div class='box'>
<div class='heading'>
Our house packages include:
</div>
<div class='content'>
<div class='myList'>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>'Classic' range of inclusions</li>
</ul>
</div>
<div class='myImg'>
<img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
</div>
</div>
<div class='footer'>
Some Footer text here
</div>
</div>

Answer 2

The reason h3 is not working the way you want is because you assigned it a margin: 10px; This is going to push the h3 border 10px away from its parent on all sides. If you don't assign it a margin, border-bottom will work fine.
It may be good practice for you to add borders to all elements so you can see how each css rule affects an elements box.
Refer to box model for further information
W3C Box Model
MDN Box Model

Answer 3

1- the border is inside the margin that's img why there is spaces .
try use the padding for h3
padding: 20px;
I fix the list for you as well .
check
jsfiddle