Why the div does not cover some items inside?

For some reason the div tag with the class "container" covers only the h2 element, and the rest if it does not see.

<section>
 <div class="container">
 <h2 class="section__title">About me</h2>
 <div class="mission">
 <h2 class="mission__title secondary-title">About the mission</h2>
 <div class="line"></div>
 <p class="mission__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <p class="mission__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non blame belongs, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.</p>
</div>
 <div class="merits">
 <h2 class="merits__title secondary-title">On the merits</h2>
 <ul class="honors">
 <li class="honors__honors item__item_beetle">
 <span class="honors__intro">Magic bug</span>
 <span class="honors__outro">Allows you to be in good shape</span>
</li>
 <li class="honors__honors item__item_bell">
 <span class="honors__intro">Special bell</span>
 <span class="honors__outro">Allows you not sleep</span>
</li>
 <li class="honors__honors item__item_lightning">
 <span class="honors__intro">fireball</span>
 <span class="honors__outro">I surrender all projects before</span>
</li>
 <li class="honors__honors item__item_camera">
 <span class="honors__intro">Photograph</span>
 <span class="honors__outro">I Just like it</span>
</li>
</ul>
</div>
</div>
 </section>


.container {
 width: 940px;
 margin: 0 auto;
}

.section__title {
 display: block;
 text-align: center;
 text-transform: uppercase ;
 font-size: 27px;
}

.mission {
 width: 400px;
 float: left;
}

.secondary-title {
 font-size: 22px;
}

.secondary-title:after {
 content: ";
 display: block;
 width: 72px;
 height: 3px;
 background: #4e8598;
 margin-top: 5px;
}

.merits {
 float: right;
}

.honors__item {
 padding: 10px 0;
 margin-bottom: 10px;
}

.honors__intro {
 color: #4e8598;
 font-weight: bold;
 font-size: 16px;
 margin-right: 28px;
}

.honors__outro {
 font-size: 15px;
 color: #b0b2b3;
}

.honors__item_beetle {
 background: url('../img/beetle.png')no-repeat left center;
 padding-left: 63px;
}

.honors__item_bell {
 background: url('../img/bell.png')no-repeat 2px center;
 padding-left: 63px;
}

.honors__item_lightning {
 background: url('../img/lightning.png')no-repeat 9px center;
 padding-left: 63px;
}

.honors__item_camera {
 background: url('../img/camera.png')no-repeat 2px center;
 padding-left: 63px;
}
April 7th 20 at 15:29
2 answers
April 7th 20 at 15:31
I am a beginner, this job is given.
Thank you - Grace_Fra commented on April 7th 20 at 15:34
@Erich_Klein, check my solution to the answer, if not more difficult. - barbara commented on April 7th 20 at 15:37
April 7th 20 at 15:33
About floaty said already - read the PRL thread in the layout, and how and what containers are pulled from the stream. Less problems in the future.

Find more questions by tags FrontendHTMLLayout