I have a problem wanting to do a responsive web using flexbox. I have a content with 4 figures and their figcaption, in the PC view I want to be distributed 2 up and 2 down, I'm using flexbox but I do not understand where I'm wrong. When I want to do it, I get the images and generate a horizontal scroll, something I do not want to do. Thank you very much already.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rosario', sans-serif;
}
header {
background: #b7ddb0;
padding: 1em;
padding-top: 2em;
display: flex;
flex-flow: row wrap;
}
body {
text-align: center;
background-color: #519839;
}
h1 {
background: url("img/logo.png") center center no-repeat;
width: 200px;
height: 200px;
font-size: 0;
flex: 1 600px;
}
h2{
background: url("img/leaves.png") center center repeat
}
nav {
flex: 1 600px;
margin-top: 2em;
}
nav ul {
display: flex;
flex-flow: row wrap;
}
nav ul li {
flex: 1 600px;
margin: 1em 0;
list-style: none;
}
nav ul li a {
padding: .5em;
background: #7bc86c;
display: block;
text-align: center;
color: #eef6ec;
text-decoration: none;
}
.notas {
line-height: 2em;
}
.notas h2 {
font-size: 4em;
line-height: 2em;
padding: .5em;
margin-bottom: .5em;
}
.notas figcaption {
font-size: 2em;
margin: 1em;
padding: 1em;
background: #7bc86c;
}
article h2{
margin-bottom: .5em;
font-size: 3em;
line-height: 2em;
}
article p {
text-align: justify;
font-size: 1.5em;
line-height: 1.5em;
padding: .5em;
}
img {
max-width: 100%;
}
.vid h2{
font-size: 4em;
line-height: 2em;
padding: -bottom: .5em;
}
.vid iframe {
max-width: 100%;
margin: auto;
border: none;
text-align: center;
align-content: center;
}
aside h2{
font-size: 4em;
line-height: 2em;
padding: -bottom: .5em;
}
form {
background: #519839;
padding: 20px;
text-align: left;
}
input,
textarea,
select {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
background: white;
}
footer {
background: #b7ddb0;
color: white;
height: 10em;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
footer ul li {
list-style: none;
text-decoration: none;
color: black;
}
.fb {
height: 50px;
width: 50px;
margin-top: 0.2em;
background: url("img/facebook.ico") no-repeat center center;
text-indent: -400px;
overflow: auto;
background-size: cover;
max-width: 100px;
max-height: 100px;
}
.tw {
height: 50px;
width: 50px;
margin-top: 0.2em;
background: url("img/twitter.ico") no-repeat center center;
text-indent: -400px;
overflow: auto;
background-size: cover;
max-width: 100px;
max-height: 100px;
}
.yu {
height: 50px;
width: 50px;
margin-top: 0.2em;
background: url("img/youtube.ico") no-repeat center center;
text-indent: -400px;
overflow: auto;
background-size: cover;
max-width: 100px;
max-height: 100px;
}
@media screen and (min-width: 600px) {
nav ul li {
flex: 1 250px;
margin: 1em;
}
}
@media screen and (min-width: 800px) {
nav ul {
flex-wrap: nowrap;
}
}
@media screen and (min-width: 999px) {
header,
section,
footer,
aside,
main,
div {
max-width: 1200px;
margin: auto;
}
body {
background: url("img/leaves.png") center center repeat;
}
header {
justify-content: center;
align-items: center;
padding: 2em;
}
h1 {
background: url("img/logo%20grande.png") center center no-repeat;
height: 300px;
}
.figs{
display: flex;
flex-flow: row no-wrap;
flex-basis: auto;
}
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="img/logo.png">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rosario:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<h1>Vivir Bien</h1>
<nav>
<ul>
<li><a href="#notas">Notas</a></li>
<li><a href="#notaP">Articulo</a></li>
<li><a href="#banner">Banner</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="notas" class="notas">
<h2>Pastillas Informativas</h2>
<div class="figs">
<figure class="fig1">
<picture>
<source media="(min-width: 900px)" srcset="img/yoga-pc.jpg">
<source media="(min-width: 600px)" srcset="img/yoga-tablet.jpg">
<img src="img/yoga-c.jpg" alt="Yoga">
</picture>
<figcaption>
Beneficios de Meditar
</figcaption>
</figure>
<figure class="fig2">
<picture>
<source media="(min-width: 900px)" srcset="img/palta-pc.jpg">
<source media="(min-width: 600px)" srcset="img/palta-tablet.jpg">
<img src="img/palta-c.jpg" alt="Dieta de Palta">
</picture>
<figcaption>
Dietas de Palta
</figcaption>
</figure>
<figure class="fig3">
<picture>
<source media="(min-width: 900px)" srcset="img/hambu-pc.jpg">
<source media="(min-width: 600px)" srcset="img/hambu-tablet.jpg">
<img src="img/hambu-c.jpg" alt="Hamburguesa Vegana">
</picture>
<figcaption>
Hamburguesas Veganas
</figcaption>
</figure>
<figure class="fig4">
<picture>
<source media="(min-width: 900px)" srcset="img/dieta-pc.jpg">
<source media="(min-width: 600px)" srcset="img/dieta-tablet.jpg">
<img src="img/dieta-c.jpg" alt="Dieta Saludable">
</picture>
<figcaption>
Dietas saludables
</figcaption>
</figure>
</div>
</section>
<article class="notap">
<h2>Estrategias para llegar en forma al verano</h2>
<figure>
<picture>
<source media="(min-width: 900px)" srcset="img/nota-pc.jpg">
<source media="(min-width: 600px)" srcset="img/nota-tablet.jpg">
<img src="img/nota-c.jpg" alt="Nota Principal">
</picture>
</figure>
<p>Toda época del año es buena para encarar un plan de alimentación sano. Pero la temporada estival es siempre una excusa. Aquí algunos consejos para lograr objetivos alcanzables.</p>
<p>Toda época del año es buena para encarar un plan de alimentación saludable, pero es en los comienzos de la primavera cuando la mayoría se acuerda de hacerlo. Para realizar un cambio en la alimentación y llegar en forma al verano, lo ideal es consultar a un nutricionista ya que cada cuerpo reacciona distinto a las variaciones alimentarias.</p>
<p>Lo importante es no caer en dietas extremas para perder peso rápidamente, sino hacer cambios graduales y complementarlo con actividad física.</p>
<p>Tampoco es cuestión de internarse en el gym para lograr en dos meses lo que se tendría que haber trabajado durante todo el año. La suma de una alimentación balanceada, actividad física adecuada y una buena hidratación darán como resultado un cuerpo saludable para el verano que se aproxima.</p>
<p>Comé en horario: realizar las cuatro comidas principales (desayuno, almuerzo, merienda y cena) es una forma de mantener tu metabolismo activo y sobre todo ayuda a no acumular hambre y evitar el picoteo.</p>
<p>Achicá el tamaño de la porción que comés: muchas veces se consumen platos saludables pero muy abundantes, por lo que hay que evaluar las cantidades y si es necesario, achicarlas para reducir las calorías.</p>
<p>No hay fórmulas mágicas para llegar con un cuerpo escultural al verano. Lo importante es llegar saludables. Comenzá con los cambios gradualmente y tené paciencia para ver los resultados. Si bien el verano es la excusa para encarar un plan de alimentación y hacer actividad física, debemos aprovechar para mantener hábitos saludables durante todo el año.</p>
</article>
</main>
<div class="banner">
<figure>
<picture>
<source media="(min-width: 900px)" srcset="img/banner-pc.jpg">
<source media="(min-width: 600px)" srcset="img/banner-tablet.jpg">
<img src="img/banner-c.jpg" alt="Banner">
</picture>
</figure>
</div>
<section id="Video" class="vid">
<div>
<h2>Video Explicativo</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/j-_dn06I19I" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
<aside id="Contacto" class="form">
<h2>Contacto</h2>
<form method="post" action="http://recursos.grodriguez.com.ar/FORM/">
<fieldset>
<label> Nombre</label> <input name="nombre" type="text" placeholder="Aquí va tu nombre" required>
<label>Apellido</label> <input name="apellido" type="text" placeholder="Aquí va tu apellido" required>
<label>Mail</label> <input name="email" type="text" placeholder="Aquí va tu e-mail" required>
<label>Tu mensaje</label> <textarea name="mensaje" cols="30" rows="10"></textarea>
<input type="submit" value="Enviar">
</fieldset>
</form>
</aside>
<footer class="footer">
<ul>
<li class="fb"><a href="#">Facebook</a></li>
<li class="tw"><a href="#">Twitter</a></li>
<li class="yu"><a href="#">Youtube</a></li>
</ul>
</footer>
</body>
</html>