Can't understand why these elements inside a flexbox container are not properly aligned-CodePudding

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" >
  <h2 >Our mission</h2>
  <div >
    <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak"  />
  </div>
  <div >
    <p >
      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>

CodePudding user response：

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" >
  <h2 >Our mission</h2>
  <div >
    <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak"  />
  </div>
  <div >
    <p >
      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>

CodePudding user response：

body {
  margin: 0;
  background-color: #4a4e69;
  color: #f2e9e4;
  font-family: "Manrope", sans-serif;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper > * {
  margin: 0 8px;
}

.row {
  display: flex;
  flex-direction: row;
}

.imageHolder {
  position: relative;
  text-align: center;
}

.imageHolder>h2 {
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  margin: 0;
}

.image {
  border: 1px solid #ffffff;
  padding: 8px;
  max-width: 280px;
}

.textHolder>p {
  width: 30vw;
  max-width: 500px;
  border: 1px solid #ffffff;
  padding: 15px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .wrapper>* {
    margin: 8px 0;
  }
  .imageHolder>h2 {
    position: unset;
    inset: 0;
    margin: 8px;
  }
  .textHolder>p {
    width: 80vw;
    max-width: 500px;
  }
}

<section >
  <div >
    <h2>Our mission</h2>
    <img  src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" />
  </div>
  <div >
    <p id="text">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime id eos, 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>

CodePudding user response：

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" >
  <div >
    <h2 >Our mission</h2>
    <div >
      <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak"  />
    </div>
  </div>
  <div >
    <p >
      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>