<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="product">
<h1>Product Name</h1>
<ul class="sps">
<li>Put on this page information about your product</li>
<li>A detailed description of your product</li>
<li>Tell us about the advantages and merits</li>
<li>Associate the page with the payment system
</li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</body>
</html>
body{
margin: 0;
font-family: Arial;
font-style: normal;
}
.container{
margin: 0;
width: 90%;
margin: 0 auto;
}
.header{
min-height: 223px;
background-color: #445162;
color: white;
padding: 50px 50px;
}
.product{
width: 47%;
display: inline-block;
}
.product > h1{
font-size: 60px;
margin: 0;
}
.product:after{
content: "";
display: block;
clear: both;
}
.banner{
background-color: white;
width: 35%;
min-height: 243px;;
display: inline-block;
float: right;
}
.sps > li{
font-size: 20px;
line-height: 36px;
list-style-image: url(images/check_icon.png)
}
почему div banner наезжает на надпись и как это исправить? И скажите в общем, что я делаю не так, как по правильному это сверстать?
