inline-block justify
HTML
<div class="page">
<div class="header">
<div class="header__wraper">
<h1 class="header__caption">Product name</h1>
<ul class="header__list">
<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 class="header__icon">
<div class="wrap">
<div id="check-part-1" class="check-sign"></div>
<div id="check-part-2" class="check-sign"></div>
</div>
</div>
<div class=" header__icon--second">
<div class="wrap">
<div id="check-part-1" class="check-sign"></div>
<div id="check-part-2" class="check-sign"></div>
</div>
</div>
<div class="header__icon--third">
<div class="wrap">
<div id="check-part-1" class="check-sign"></div>
<div id="check-part-2" class="check-sign"></div>
</div>
</div>
<div class=" header__icon--fourth">
<div class="wrap">
<div id="check-part-1" class="check-sign"></div>
<div id="check-part-2" class="check-sign"></div>
</div>
</div>
</div>
<div class="header__end"></div>
</div>
</div>
CSS
body {
font-family: Arial
}
.page {
padding: 50px;
background-color: #445162;
}
.header {
margin: 0 auto;
max-width: 1280px;
}
.header__caption {
color: #fff;
font-size: 2.5em;
}
.header__list {
list-style: none;
font-size: 1.2em;
float: left;
color: #ffffff;
list-style-image:
}
.header:after {
display: block;
clear: both;
content: '';
}
.header__end {
width: 470px;
height: 220px;
border: 3px solid black;
background-color: purple;
position: absolute;
top: 90px;
right: 100px;
}
.header__list li {
padding-bottom: 10px;
}
.wrap {
position: relative;
margin-top: 100px;
}
.check-sign {
position: absolute;
background: black;
}
#check-part-1 {
width: 25px;
height: 5px;
transform:rotate(45deg);
}
#check-part-2 {
width: 25px;
height: 5px;
transform: rotate(-45deg);
}
.header__icon--second {
position: absolute;
}