Как мне отцентрировать средний текст гибкого контейнера?

Question

У меня есть это:

HTML:

  </div class="container">
    <footer>Maximilian Crosby ©</footer>
  </div>
  <div class="bot-bar" >
    <a href="./contact-us.html">Contact us</a>
    <a href="./contact-us.html">Privacy</a>
    <a href="./contact-us.html">Legal</a>
  </div>

CSS:

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 200px 10fr 1fr;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.bot-bar  {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 1em 0 1em 0;
}

Проблема в том, что текст в нижнем колонтитуле занимает центральное место, а слово "Конфиденциальность »на гибкой панели ниже не находится непосредственно под текстом нижнего колонтитула.Он немного вправо, потому что очевидно, что flex централизует три элемента flex в контейнере flex.

Как бы я мог сосредоточить слово «конфиденциальность» с помощью flex?Должен ли я обосновать содержание: центр;ПРОСТО конфиденциальность, а затем добавить отступы?

Answer 1

Редактировать: На самом деле, чтобы сохранить хорошие практики, вы должны добавить класс к a элементу.

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 200px 10fr 1fr;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
  text-align: center;
}

.bot-bar  {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 1em 0 1em 0;
}

.bot-bar__link{
  flex: 1;
  text-align: center;
}

 </div class="container">
    <footer>Maximilian Crosby ©</footer>
  </div>
  <div class="bot-bar" >
    <a class="bot-bar__link" href="./contact-us.html">Contact us</a>
    <a class="bot-bar__link" href="./contact-us.html">Privacy</a>
    <a class="bot-bar__link" href="./contact-us.html">Legal</a>
  </div>