Como dice la pregunta, es una página de receta donde se muestran solo 3 cajas de contenido con texto e imagen, quiero que las 3 cajas queden en forma lineal y del mismo tamaño para que sea simétrico pero la caja de la izquierda queda más grande que las demás, esto lo noto gracias al header que está centrado y la caja del medio no se alinea al header sino que se muestra un poco más a la derecha, el estilo aún no está terminado ni mucho menos porque ese problema no me ha dejado avanzar, he intentado varias opciones como float y box-sizing, pero no me han funcionado o las he configurado mal yo, cabe acotar que soy nuevo en esto, este es mi primer diseño así que acepto todo tipo de críticas y sugerencias, agradezco que me tengan un poco de paciencia y muchas gracias de antemano.
`
<div id="primario">
<header>
<hgroup id="cabecera">
<h1 id="cabecera1">Wilmer's kitchen</h1>
<h2 id="cabecera2">Learn easy and delicious recipes</h2>
</hgroup>
</header>
<section>
<div id="arepa">
<article>
<h1><a id="link" href="./recipes/arepa.html">Venezuelan Arepas</a></h1>
<a href="./recipes/arepa.html"><img src="./images/arepahead.jpg" alt="Venezuelan Arepa"></a>
<h6>About</h6>
<div id="arepatext">
<p>The arepa is a flat, dish-shaped, unleavened patty made
of maize flour which can be grilled, fried, or even boil.
Depending on what kind of meal (breakfast, lunch, or dinner)
can be filled in <strong>many</strong> ways. If serving for breakfast,
my favorite filling is scrambled eggs, or cheese, and ham.
Now, if they are to be served for lunch or dinner, they go
perfectly with chicken, beef, pork, tuna, or beans.</p>
<p>The arepa is a pre-Columbian dish from the area that is now
Venezuela, Panamá and Colombia. Instruments used to make
flour for the arepas, and the clay slabs on which they
were cooked, were often found at archaeological sites in
the area.</p>
</div>
</article>
</div>
<div id="karaage">
<article>
<h1><a id="link" href="./recipes/karaage.html">Karaage Chicken</a></h1>
<a href="./recipes/karaage.html"><img src="./images/karaagehead.jpg" alt="Karaage Chicken"></a>
<h6>About</h6>
<div id="karaagetext">
<p>Karaage is often cited to have been popularized in
the 1920s by the Toyoken restaurant in Beppu, Japan.
The method was popularized because of the food shortages
in Japan after World War II, specifically for chicken.
Chicken was already a popular meal, but using the Karaage
method made it easier to cook, and provided a different
way to eat chicken.</p>
<p>The Japanese heavy battered frying technique used for
fried chicken, “karaage”, has only been in Japan since
the 1920s. It was originally introduced by the Chinese
as a way of frying tofu for vegetarian meals and is
unique as it uses soy sauce and rice wine in the
cooking process.</p>
</div>
</article>
</div>
<div>
<article id="fajitas">
<h1><a id="link" href="./recipes/chicken.html">Chicken Fajitas</a></h1>
<a href="./recipes/chicken.html"><img src="./images/fajitashead.jpg" alt="Chicken Fajitas"></a>
<h6>About</h6>
<div id="fajitastext">
<p>A fajita, in Tex-Mex cuisine, is any stripped grilled meat
with stripped peppers and onions that is usually served
on a flour or corn tortilla. The term originally referred
to skirt steak, the cut of beef first used in the dish.
Popular alternatives to skirt steak include chicken and
other cuts of beef, as well as vegetables instead of meat.</p>
<p>The first culinary evidence of the fajitas with the cut of
meat, the cooking style (directly on a campfire or on a
grill), and the Spanish nickname goes back as far as the
1930s in the ranch lands of South and West Texas.</p>
</div>
</article>
</div>
</section>
`
CSS
* {
font-family: sans-serif;
overflow: hidden;
}
section {
background-color: #192a56;
display:flex;
margin: 30px;
}
body {
background-color: black;
}
#cabecera {
text-align: center;
background-color: #192a56;
color: white;
}
#cabecera2 {
font-style: italic;
font-size: 18px;
}
img {
height: 300px;
width: 400px;
padding: 10px;
}
#arepa,
#karaage,
#fajitas {
overflow: hidden;
width: auto;
border-left: 1px solid black;
padding: 5px;
text-align: center;
}
#link {
color: white;
font-style: italic;
text-decoration: none;
}
#arepatext,
#karaagetext,
#fajitastext {
color: white;
}```