How can i fix it? Card out of DIV - html

Question

I'm trying to list side by side an anime list with images and name on a card, but the DIV ends and the image ignores and continues, how can I solve this?
URL: Here
Image: The image
css:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
min-width: 199px;
max-width: 200px;
float:left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left:5px;
margin-top:10px;
}
HTML:
<div class="container">
<div class="card">
<button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
<img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
<div class="container">
<h4><b>Black Clover</b>
</h4>
</div>
</div>

Answer 1

First of all, you're site's Bootstrap version is out of date with the HTML syntax you're using. Cards replaced panels from Bootstrap 3. You're using Bootstrap 3, view here which uses panels.
A lot of things changed between Bootstrap 3 and 4. I highly recommend you go with Bootstrap 4. Additionally, your HTML syntax doesn't line up with the traditional layout.
container > row > column > card
Here is a Codepen you can fork and play with.
Here is an example of what you need using Bootstrap 4.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
/* Custom CSS */
.text-strong {
font-weight: bold;
}
.card-body {
padding: .5rem;
}
.card-title {
margin: 0;
}
.card {
border: 2px dashed black;
box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}
.card:hover {
box-shadow: 0px 10px 20px rgba(60, 141, 188,0.5);
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>
<div class="container-fluid p-5">
<div class="row no-gutters">
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Bleach</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Black Clover</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Boku dake ga in...</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Dragon Ball Super</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Nanatsu no Taizai</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Naruto Shippuden</h5>
</div>
</div>
</div>
</div>
</div>