Olá! Recentemente estava exercitando um layout com flexbox. Porém os banners não estão ficando centralizados, quando eu aumento ou diminuo o zoom eles não ficam certos.
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>minha lista de animes</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Google webfont -->
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<!-- FontAwesome css -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Core bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Kanda's extended style -->
<link rel="stylesheet" href="css/extended.min.css">
<link rel="stylesheet" href="css/bootstrap.min_bmd.css">
<link rel="stylesheet" href="css/bootstrap-material-datetimepicker_bmd.css">
<link rel="stylesheet" href="css/pessoal.css">
<link rel="stylesheet" href="css/store.css">
<!-- Modernizr -->
<!--[if IE 8]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<![endif]-->
</head>
<body>
<!-- site de animes e mangas, onde vc pode listar tudo que quer-->
<!-- primeiro passo é o menu.-->
<div class="header">
<div id="store-page">
<div id="header">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">minha lista de animes</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="fa fa-shopping-cart fa-fw"></i> HOME</a></li>
<li><a href="#"><i class="glyphicon glyphicon-book"></i> MANGÁS</a></li>
<li><a href="#"><i class="glyphicon glyphicon-star-empty"></i> ANIMES</a></li>
<li><a href="#"><i class="glyphicon glyphicon-fire"></i>BLOG</a></li>
<li><a href="#"><i class="glyphicon glyphicon-user"></i> QUEM SOMOS</a></li>
</ul>
<p class="navbar-text navbar-right">Fala seu login! <a href="#" class="navbar-link"><i class="fa fa-user"></i> <!-- Gilty--></a></p>
<p class="navbar-text navbar-right">Faça seu cadastro!
<a href="#" class="navbar-link"></a>
</p>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- fim do menu, falta configurar a parte de login.-->
</div>
</div>
<!-- corpo do site, aqui fica o conteudo direito e esquerdo-->
<div class="conteudo">
<div class="conteudo-direito">
<div class="mangas-novos-cima">
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
</div>
<div class="mangas-novos-baixo">
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
<div class="capa"><img src="img/150x200.jpg" alt="padrão"></div>
</div>
</div>
<div class="conteudo-esquerdo"></div>
</div>
<!-- corpo do site, aqui finaliza o conteudo direito e esquerdo-->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Core Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Kanda's extended script -->
<script src="js/extended.min.js"></script>
<script>
// initialize Kanda extended script
extended = new Extended();
</script>
</body>
</html>CSS
html, body {
width: 100%;
height: 100%;
background-color: rgb(188, 240, 247);
}
.conteudo {
margin: 0 auto;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
position: absolute;
}
.conteudo-direito {
margin-left: 3%;
width: 77%;
height: 100%;
border-radius: 8px;
background-color: rgb(88, 133, 200);
display: flex;
flex-wrap: wrap;
}
.mangas-novos-cima {
margin-left: 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
;
}
.mangas-novos-baixo {
margin-top: -15%;
margin-left: 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
;
}
.conteudo-esquerdo {
margin-left: 1%;
margin-right: 1%;
width: 18%;
height: 100%;
border-radius: 8px;
background-color: rgb(31, 185, 130);
display: flex;
justify-content: flex-end;
}
.capa {
position: static;
margin-top: 5%;
margin-left: 5%;
width: 150px;
height: 200px;
border-radius: 8px;
}
.capa img {
margin: 0 align-items: center;
border-radius: 8px;
width: 150px;
height: 200px;
}