HTML CSS FLEX проблема, div не центрируются правильно

Question

По сути, контейнер ученика должен быть слева, а затем div, который открывается после onClick, должен быть центрирован (желтая точка на изображении 1). Я заметил, что он выглядит по-разному на мониторах разных размеров.

Вот две фотографии моего прогресса на данный момент, я разбил некоторые контейнеры, чтобы, надеюсь, помочь вам, ребята.

Надеюсь, все имеет смысл.

Вот HTML:

.body2 {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px dotted red;
}

.body3 {
  padding: 5px;
  text-align: center;
  display: flex;
  /* flex-direction: row; */
  /* align-items: center; */
  border: 2px dotted orange;
}

.body-flexstart {
  text-align: center;
  justify-content: center;
  display: flex;
  justify-self: flex-start;
  width: 400px;
  /* flex-direction: row; */
  /* flex-flow: row wrap; */
  /* justify-content: space-around; */
  /* align-items: flex-start; */
  /* border: 1px dotted green; */
}

.column1 {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px dotted yellow;
}

<div class="body2">
  <div class="body-flexstart">
    <div class="column1">
      <div onclick="console.log('clicked')" id="button" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/dream-dust.gif"> Dream Dust</div>
            </td>
            <td class="professionheader3">300x</td>
          </tr>
        </tbody>
      </table>
      <br>
      <div onclick="console.log('clicked')" id="button1" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table1">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
      </table>
      </div>
      </div>
      <div class="body3">
        <div class="box2" id="box">
          <p class="professionheader3">A</p>
        </div>
        <div class="box2" id="box1">
          <p class="professionheader3">B</p>
        </div>
      </div>
      </div>

Answer 1

Вложите div class="body3"> внутрь нового div и добавьте:

{ display: flex; justify-content: center; text-align: center; width: 100%;}

Проверьте это jsfiddle

.body2 {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px dotted red;
}

.body3 {
  padding: 5px;
  text-align: center;
  display: flex;
  /* flex-direction: row; */
  /* align-items: center; */
  border: 2px dotted orange;
}

.new--div {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.body-flexstart {
  text-align: center;
  justify-content: center;
  display: flex;
  justify-self: flex-start;
  width: 400px;
  /* flex-direction: row; */
  /* flex-flow: row wrap; */
  /* justify-content: space-around; */
  /* align-items: flex-start; */
  /* border: 1px dotted green; */
}

.column1 {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px dotted yellow;
}

<div class="body2">
  <div class="body-flexstart">
    <div class="column1">
      <div onclick="console.log('clicked')" id="button" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/dream-dust.gif"> Dream Dust</div>
            </td>
            <td class="professionheader3">300x</td>
          </tr>
        </tbody>
      </table>
      <br>
      <div onclick="console.log('clicked')" id="button1" class="test1">
        <h1 class="itemcomponenttextheader">Apprentice</h1>
        <h1 class="itemcomponenttextheader">1 - 75</h1>
      </div>
      <table id="table1">
        <thead>
          <tr>
            <th class="tableheader">Mats</th>
            <th class="tableheader">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/inv_enchant_duststrange.jpg"> Strange Dust</div>
            </td>
            <td class="professionheader3">150x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/soul-dust.png"> Soul Dust</div>
            </td>
            <td class="professionheader3">90x</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="professionheader3">
              <div class="matslist">
                <div class="matsicon2">
                  <img class="matsiconlist" src="./enchantingimages/vision-dust.gif"> Vision Dust</div>
            </td>
            <td class="professionheader3">170x</td>
          </tr>
        </tbody>
      </table>
      </div>
      </div>
      <div class="new--div">
        <div class="body3">
          <div class="box2" id="box">
            <p class="professionheader3">A</p>
          </div>
          <div class="box2" id="box1">
            <p class="professionheader3">B</p>
          </div>
        </div>
      </div>
      </div>