how to adjust horizontal line - html

Question

i am trying to make an mobile application but the design a page with a line after each segment but right now it is not coming on the place as the above one ( see the code ) can someone help me with the same .
code:
HTML :
<div class="main_paragraph">
<p><b><h3>Mode of notification</h3></p></b><p id="p1">Select mode of notification</p>
</div>
<div>
<div id="row11"><img id="msg" src="http://megaicons.net/static/img/icons_sizes/8/60/256/basic-message-icon.png" alt="message_icon"><p id="p2">
&nbsp&nbsp&nbsp Email </p></div>
<div id="row12"><div id="p3"><select name="flip-3" id="flip-3" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select><div></div><br>
<div class="h_line"></div>
<div id="row21"><img id="img2" src="https://cdn4.iconfinder.com/data/icons/epic-outlines/30/message-512.png" alt="message_icon"><p id="p2">
&nbsp&nbsp&nbsp SMS</p></div>
<div id="row22"><div id="p3"><select name="flip-3" id="flip-3" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select><div></div><br>
</div>
<div class="main_paragraph1">
<p><b><h3>Display Preferences</h3></p></b><p id="p11">Select the default landing page</p>
</div>
<div class="h_line_big"></div>
<div id="sub">
<div id="row31"><img id="msg1" src="https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/large-thumbnails-512.png" alt="message_icon"><p id="p12">
&nbsp&nbsp&nbsp Analytics</p></div>
<div id="row32"><div id="p34"><div></div><br>
<div class="h_line"></div>
<div id="row41"><img id="img3" src="https://cdn4.iconfinder.com/data/icons/miu/24/circle_backup_time_history_recent_time-machine_-128.png" alt="message_icon"><p id="p21">
&nbsp&nbsp&nbsp Timeline</p></div>
<div id="row42"><div id="px"><img id="dot" src="https://cdn3.iconfinder.com/data/icons/objects/512/Dot-128.png" alt="dot"></div>
</div>
CSS:
.main_paragraph {
margin-left:5%;
}
#p1 {
margin-top:-10px;
position:relative;
}
#msg
{ padding-top:15px;
height:20px;
width:25px;
margin-left:10%;
float:left;
}
#p2
{ text-shadow: none;
display-block:inline;
}
#row11
{float:left;
margin-top:25px;
width:70%;
height:100px;
}
#row12
{ float:right;
display-block:inline;
height:100px;
width:30%;
margin-top:25px;
}
#p3
{
padding-bottom:10px;
}
.h_line
{ width:100%;
height:1px;
background: black;
position: absolute;
left: 0;
background:black;
}
#row21
{ position:absolute;
float:left;
margin-top:25px;
left:0;
display-block:inline;
width:70%;
}
#row22
{ float:left;
display-block:inline;
margin-right:30px;
margin-top:25px;
}
#img2
{ padding-top:15px;
height:20px;
width:25px;
margin-left:10%;
float:left;
}
.h_line_big
{
width:100%;
height:7px;
background: #CCCCCC;
position: absolute;
left: 0;
}
.main_paragraph1 {
margin-top:15px;
margin-left:5%;
position:absolute;
left:0;
}
#p11 {
margin-top:-10px;
position:relative;
}
#msg1
{ padding-top:15px;
height:20px;
width:25px;
margin-left:10%;
float:left;
}
#p12
{ text-shadow: none;
display-block:inline;
}
#row31
{
position:absolute;
float:left;
margin-top:25px;
left:0;
display-block:inline;
width:70%;
}
#row32
{ float:left;
display-block:inline;
height:100px;
width:30%;
margin-top:25px;
}
#p34
{
padding-bottom:10px;
}
.h_line
{ width:100%;
height:1px;
background: black;
position: absolute;
left: 0;
background:black;
}
#row41
{ position:absolute;
float:left;
margin-top:25px;
left:0;
display-block:inline;
width:100%;
}
#row42
{ float:left;
display-block:inline;
margin-right:10px;
margin-top:25px;
}
#img3
{ padding-top:15px;
height:20px;
width:25px;
margin-left:10%;
float:left;
}
#sub {
margin-top:100px;
}
#dot
{ margin-left:10px;
margin-top:10px;
height:20px;
width:20px;
}
.h_line1
{
width:100%;
height:1px;
top:52px;
background: black;
position: absolute;
left: 0;
background:black;
}
#px
{
padding-bottom:10px;
min-height:10px;
}
http://jsfiddle.net/tvaibhav/w3wbksb6/2/