How to align child elements in Flexbox?

Question

css

Help me please.
you need to use flexbox to make sure that the .new block is flush with the .new-content block, which is located in the middle with equal distance between the .new-box blocks nested in it .
I've already broken my head, I can't do it.
ps picture with visualization attached =)
Thank you!

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f0e1;
}

.new {
  display: flex;
  align-self: normal;
} /* в этом блоке заголовок h1*/

.new-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.new-box {
  width: 20%;
  height: 400px;
/*здесь картинка*/
}

Picture for clarity:

Answer 1

Set .new to the same width as .new-content