<hr> Alignment not proper in the html layout - html

Question

body{
background: #d4d4d4;
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image{
float:left;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li>Order Total</li>
<li>�191.60</li>
<li>�0.00</li>
<li>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
I'm new to html and css. I have been trying to make an email template using html and css but it's not in the right away.The <hr> alignments are not proper.I have attached a screen shot as to how the look should be.
Should I have to use relative and absolute positioning or normal floats/ul and li. It would be helpful if someone gives me an insight on it. Thank You.

Answer 1

I have fixed the <hr> alignment. I have also made few more changes.
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top; //This is used to align all li from top
}
Here is the plunker: https://plnkr.co/edit/04dN4PDB3LjLHBjAOGbZ?p=preview
/* Styles go here */
body{
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image, .price-container{
float:left;
}
.price-container {
width: calc(100% - 200px);
}
.product-image {
width: 180px;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
padding: 0;
margin: 0;
}
.price-list h4 {
margin-top: 0;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<br>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li style='border-top:1px solid black;margin-top:20px;padding-top:18px'>Order Total</li>
<li>�191.60</li>
<li >�0.00</li>
<li style='border-top:1px solid black;margin-top:18px;padding-top: 18px'>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
</body>
</html>