HTML5/CSS3 - Float issue - html

Question

I have a "posts__box" ("Davi Jesus" section) that is floating far to the right even with a "posts__box--left" class ("float: left"). HTML is fine, CSS is fine, I'm freaking out 'cause I can't understand why the heck this is happening.
btw: "revista" means "magazine" and it's my first time trying to apply BEM methodoly. I'm a newbie webdesigner.
Images:
.posts {
width: 100%;
}
.container {
float: left;
width: 80%;
height: 1400px;
margin: 0 135px;
padding: 0;
background: #ffffff;
}
.box--btn {
margin-top: 10px;
border: 1.5px solid black;
box-shadow: 2px 2px 2px dimgray;
}
.posts__box {
margin-top: 40px;
margin-left: 20px;
width: 30%;
}
.box--title {
text-align: center;
}
.box--img {
width: 100%;
box-shadow: 3px 3px 3px Dimgray;
}
.box--text {
padding: 5px;
}
.box--author {
float: right;
width: 46%;
height: 50px;
}
.box--author--text {
margin-top: 10px;
margin-left: 6px;
}
.box--continue {
float: left;
width: 46%;
height: 50px;
}
.box--continue--text {
margin-top: 12px;
margin-left: 7px;
}
.posts__btns {
float: left;
margin-top: 20px;
width: 100%;
height: 200px;
}
/* MODIFIERS */
.revista__posts--height {
height: 3000px;
}
/* posts */
.title--red {
color: rgba(233, 26, 26, 1);
}
.title--size-small {
font-size: 30px;
text-shadow: 1.5px 1.5px black;
}
.title--size-large {
font-size: 60px;
text-shadow: 3px 3px black;
}
.box--btn--red {
background: rgba(233, 26, 26, 1);
}
.continue--white {
color: #ffffff;
text-shadow: 1.5px 1.5px black;
}
.box--btn--black {
background: #212121;
}
.author--white {
color: #ffffff;
text-shadow: 2px 2px black;
}
.posts__box--left {
float: left;
}
.posts__box--right {
float: right;
}
.posts__box--margin--fix--left {
margin-top: 10px;
margin-left: 40px;
}
.posts__box--margin--fix--top {
margin-top: 34px;
margin-left: 40px;
}
.posts__btns--left {
float: left;
margin-left: 20px;
}
.posts__btns--right {
float: right;
margin-right: 20px;
}
/* revista */
.container__border {
border-top: 4px solid black;
border-left: 4px solid black;
border-right: 4px solid black;
}
.revista__container--height {
height: 4800px;
}
<article class="posts">
<section class="container revista__container--height container__border">
<!-- davi jesus -->
<section class="posts__box posts__box--left">
<div class="box--title">
<a class="title--red --hover" href="..\revista\artistas\davi-jesus.html">
<h1 class="title--size-small --hover--darkred">Davi de Jesus do Nascimento:<br> corpo de rio</h1>
</a>
</div>
<div>
<a href="..\revista\artistas\davi-jesus.html">
<img class="box--img" src="..\_img\posts\davi-de-jesus\instax\6.png" alt="">
</a>
</div>
<div class="box--continue box--btn box--btn--red">
<a class="--hover" href="..\revista\artistas\davi-jesus.html">
<h5 class="box--continue--text continue--white -font--very-small --hover--dimgray">CONTINUAR A LEITURA</h5>
</a>
</div>
<div class="box--author box--btn box--btn--black">
<a class="--hover" href="..\revista\artistas\daniel-jesus.html">
<h2 class="box--author--text author--white -font--small --hover--dimgray">Davi Jesus</h2>
</a>
</div>
</section>

Answer 1

I just fixed it with a simple "clear: left" class. I guess it was just some weird bug or something like that. If someone has a different explanation and could share with us, I would appreciate. Thanks!