Quiero colocar una imagen a la izquierda y un texto a la derecha y abajo el texto a la izquierda y la imagen a derecha, pero se muestran uno abajo de otro aun teniendo el display: inline-block. Trate con display:flex y que el div de la imagen del texto estén en columna y cada texto e imagen en linea, con esta opción la imagen se pone arriba del texto.
ayuda amigos por favor,en la parte de about cuando este en pantalla,las imagenes y el texto deben quedar en linea pero a su vez en bloque con las de abajo,como se los explique anteriormente pero no logro solucionarlo y solo debo usar CSS y HTML ademas cuando voy reduciendo la pantalla siempre hay una separación molesta entre los div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Pizzeria</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<header>
<div class="header-container">
<h1><a href="index.html">PIZZERIA</a></h1>
<nav>
<ul>
<li><a href="#presentation">Inicio</a></li>
<li><a href="#about">Sobre nosotros</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#reservation">Reservas</a></li>
</ul>
</nav>
</div>
</header>
<!--about-->
<section class="about" id="about">
<article class="imagenytexto">
<div class="imagen1">
<img src="./resources/images/pizza1.jpg" alt="" id="imagen1" />
</div>
<div class="texto1">
<h2 class="title1">Nuestras Pizzas</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
autem eius suscipit accusantium iusto velit, atque provident enim
fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
</p>
</div>
</article>
<article class="imagenytexto">
<div class="imagen2">
<img src="./resources/images/pizza2.jpg" alt="" id="imagen2" />
</div>
<div class="texto2">
<h2 class="title2">Nuestra historia</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
autem eius suscipit accusantium iusto velit, atque provident enim
fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
</p>
</div>
</article>
</section>
</body>
</html>
/*----Universal-----*/
* {
box-sizing: border-box;
font-family: "Reboto", sans-serif;
margin: 0;
}
.left {
float: left;
}
.rigth {
float: right;
}
.dark_overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
/*----About----*/
.about {
height: 1000px;
width: 100%;
font-size: 18px;
border: 5px solid black;
margin: 0.5rem 0;
}
.about article {
width: 100%;
height: 50%;
}
.imagenytexto {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
#imagen1 {
width: 40rem;
height: 500px;
float: left;
object-fit: cover;
flex-direction: row;
}
.texto1 {
float: left;
text-align: justify;
padding: 130px 30px;
flex-direction: row;
}
#imagen2 {
width: 40rem;
height: 500px;
float: right;
object-fit: cover;
flex-direction: row;
}
.texto2 {
float: left;
text-align: justify;
padding: 130px 30px;
flex-direction: row;
}
.title1 {
padding: 1rem 1rem 1rem 0;
}
.title2 {
padding: 1rem 1rem 1rem 0;
}