[FIXED] How do I remove space between flexbox vertically centred rows?

Issue

I have two rows, with a heading in the top row, and 2 columns in the bottom row, all vertically centred within a fullscreen wrap. For some reason, I cannot get rid of the extra vertical space that the fullscreen wrap adds in between the two rows, despite adding:

align-content:centre

as well as display: flex to both parent divs (.wrap and .row)

What am I doing wrong?

jsfiddle: https://jsfiddle.net/ar4Ltoke/2/

.wrap {
  width: 1280px;
  min-height: 100vh;
  border-style: solid;
}

.row {
  width: 100%;
  align-items: flex-start;
  margin: auto;
  border: 1;
  border-style: solid;
}

.column_left {
  flex-basis: 60%;
  border: 1;
}

.column_right {
  flex-basis: 30%;
}

@media (min-width:640px) {
  .row {
    display: flex;
    justify-content: space-between;
  }
  .wrap {
    display: flex;
    align-content: center;
    flex-direction: column;
  }
}

<div class="wrap">
  <div class="row">
    <p class="blue">About me</p>
  </div>
  <div class="row">
    <div class="column_left">
      <p class="leadpara">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi
        erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      </p>
    </div>
    <div class="column_right">
      <p class="leadpara">
        Email
        <br> Add me on Linkedin
        <br> Tweet at @fsd
      </p>
    </div>
  </div>
</div>

Solution

Two reasons:

1. You have margin: auto on .row. That causes both .row flex items to distribute space equally in the container, which forces them to separate.

2. The .wrap element is a column-direction flex container. That means that the main axis is vertical. As a result, you need justify-content to vertically center the rows.

revised demo

For a more detailed explanation see:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answered By - Michael Benjamin

Answer Checked By - Marilyn (PHPFixing Volunteer)