Элементы наезжают друг на друга

nevalek · June 18, 2019

<!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 наезжает на надпись и как это исправить? И скажите в общем, что я делаю не так, как по правильному это сверстать?

klierik · June 19, 2019

Здравствуйте.

Попробуйте вот так

Sign In

Элементы наезжают друг на друга

Question

nevalek

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information