Exclude inner elements from Flexbox?

Question

The interview-box-container is where it should be when using flexbox, but I can't align any of the internal elements of the div. Text-align doesn't influence the text b/c of flexbox; tried to do w/o flexbox and used vertical-align: center w/o luck.

Hoping to find a solution where I can use flexbox and be able to align internal content/elements inside the box.

body {
  height: 100%;
  width: 100%;
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  /*align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;*/
  vertically-align: center;
}

.interview-box {
  position: relative;
  border: 2px solid black;
  max-width: 625px;
  width: 100%;
  min-height: 446px;
  /*display: flex;
  flex-direction: column;
  align-items: center; */
  padding: 35px;
  background: white;
  margin-top: 100px;
  margin-bottom: 80px;
}
/*should be sitting on the right*/
.interview-box>button {
  position: absolute;
  bottom: 35px;
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}
/*should be on the left*/
.interview-box > p {
  text-align: right;
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
    <div class="interview-box">
      <p>Explanation text</p>
      <button>Button Text</button>
    </div>
  </div>
</section>

Answer 1

You can set justify-content: center; in .interview-box-container and few other tweaks such as removing position:absolute from button (see comments in snippet)

Note: there isn't value center for property vertical-align, the closest you find is the middle value

body {
  height: 100%;
  width: 100%;
  margin: 0
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  display: flex;
  justify-content: center; /*align box in center */
}

.interview-box {
  /*position: relative; */
  border: 2px solid black;
  max-width: 625px;
  min-height: 446px;
  display: flex;
  flex-direction: row-reverse; /* to make button on left and text on right*/
  align-items: center; /* align the text and button vertically*/
  justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
  padding: 35px;
  background: white;
  margin: 100px 0 80px
}

.interview-box>button {
 /* position: absolute;
  bottom: 35px;*/
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}

.interview-box>p {
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
    <div class="interview-box">
      <p>Explanation text</p>
      <button>Button Text</button>
    </div>
  </div>
</section>

---

Although I don't know what is your point with this markup, it can be simplified like this:

body {
  height: 100%;
  width: 100%;
  margin: 0
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  border: 2px solid black;
  max-width: 625px;
  min-height: 446px;
  display: flex;
  flex-direction: row-reverse; /* to make button on left and text on right*/
  align-items: center; /* align the text and button vertically*/
  justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
  padding: 35px;
  background: white;
  margin: 100px auto 80px
}

.interview-box-container>button {
 /* position: absolute;
  bottom: 35px;*/
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}

.interview-box-container>p {
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
      <p>Explanation text</p>
      <button>Button Text</button>
  </div>
</section>

Answer 2

You can try margin to align the box and flex inside it by using space-between :

body {
  height: 100%;
  width: 100%;
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}



.interview-box {
  position: relative;
  border: 2px solid black;
  max-width: 625px;
  width: 100%;
  min-height: 446px;
  margin:100px auto 80px;
  display: flex;
  align-items: center; 
  padding: 35px;
  background: white;
  margin-top: 100px;
  margin-bottom: 80px;
  justify-content:space-between;
}

.interview-box>button {
  width: 108px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}

.interview-box>p {
  text-align: right;
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
    <div class="interview-box">
      <p>Explanation text</p>
      <button>Button Text</button>
    </div>
  </div>
</section>