无法理解为什么 flexbox 容器中的这些元素没有正确对齐

Question

I'm trying to organize these elements like picture and textBox evenly, with equal distances from the borders but it looks like the div with picture inside takes too much space and is pushing textBox to the right. I've tried flex-grow:1; and plenty other ideas, in another section where is my own SVG it seems to work fine but here for some reason not. I know my code is sloppy and amateurish, I'm still learning basics.

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } main { padding: 5%; } section { height: 40rem; padding: 1%; padding-top: 5%; } .wrapper { display: flex; align-items: center; align-content: center; justify-content: center; margin: 0 auto; max-width: 80%; flex-wrap: wrap; flex-direction: column; } .textBox { margin: 0 auto; display: flex; flex-direction: column; text-align: center; row-gap: 50px; justify-content: center; align-items: center; max-width: 40%; height: fit-content; } .text { border: 1px solid white; margin: 5%; padding: 5%; text-align: center; text-indent: 1ch; } .image { border: 1px solid white; padding: 2%; max-width: 50%; } .sloganSmall { padding: 2%; text-align: center; display: block; position: relative; margin: 0 auto; } .shit { margin: 0 auto; max-width: fit-content; text-align: center; }

 <section id="intro" class="wrapper"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>

Answer 1

You overcomplicate your coding. For this matter with your amrkup I would advcie to use CSS-grid. Justc reate a 2 columns grid and let the title span both columns:

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } .wrapper { max-width: 80%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } .wrapper > h2 { grid-column: 1 / -1; text-align: center; } .wrapper > .shit { display: flex; align-items: center; } .wrapper > .shit > img { width: 100%; }

 <section id="intro" class="wrapper"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>

Answer 2

Another way, you will need to adjust...

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } main { padding: 5%; } section { height: 40rem; padding: 1%; padding-top: 5%; } .wrapper { display: inline-block; margin: 0 auto; max-width: 80%; } .textBox { margin: 0 auto; display: block; text-align: center; width: 50%; float: left; } .text { border: 1px solid white; margin: 5%; padding: 5%; text-align: center; text-indent: 1ch; } .image { border: 1px solid white; padding: 2%; max-width: 50%; } .sloganSmall { padding: 2%; text-align: center; display: block; position: relative; margin: 0 auto; } .shitblock { margin: 0 auto; float: left; width: 50%; display: block; } .shit { margin: 0 auto; text-align: center; }

 <section id="intro" class="wrapper"> <div class="shitblock"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>