Trying to center a single column with content on the left in CSS

Question

I have a project for implementation that should have a centered column of labels, and then text to the left of each. It should look like this:

The label column should be centered under the heading.

I can't get this to work with responsive design. This markup has an ATM:

<div class="ax-learn__shortcuts">
 <h2>Learn shortcuts</h2>
 <div class="ax-learn__shortcuts-row">
   <div>Go to home:</div>
   <div><kbd>g</kbd>then<kbd>h</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to search:</div>
   <div><kbd>g</kbd>then<kbd>s</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to learn:</div>
   <div><kbd>g</kbd>then<kbd>l</kbd></div>
 </div>    

And the current CSS, which doesn't center it at all, is this:

.ax-learn__shortcuts {
  display: flex;
  flex-direction: column;
}

.ax-learn__shortcuts h2 {
  text-align: center;
}

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

And here is an example on Codepen

Answer 1

-, , flex: 1, kbd .

text-align: right margin: 0 10px kbd, :)

, .

.ax-learn__shortcuts-row::after {
  content: '';
}
.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}
.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}
.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ax-learn__shortcuts-row::after {
  content: '';
}

.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}

.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}

.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}

.ax-learn__shortcuts {
  display: flex;
  flex-direction: column;
}
.ax-learn__shortcuts kbd {
  padding: 7px 15px;
  border: 2px solid black;
  border-radius: 5px;
  background: white;
  display: inline-block;
}
.ax-learn__shortcuts kbd:first-of-type {
  margin-right: 15px;
}
.ax-learn__shortcuts kbd:last-of-type {
  margin-left: 15px;
}
.ax-learn__shortcuts h2 {
  text-align: center;
}

<div class="ax-learn__shortcuts">
  <h2>Learn shortcuts</h2>
  <div class="ax-learn__shortcuts-row">
    <div>Go to home:</div>
    <div><kbd>g</kbd>then<kbd>h</kbd></div>
  </div>
  <div class="ax-learn__shortcuts-row">
    <div>Go to search:</div>
    <div><kbd>g</kbd>then<kbd>s</kbd></div>
  </div>
  <div class="ax-learn__shortcuts-row">
    <div>Go to learn:</div>
    <div><kbd>g</kbd>then<kbd>l</kbd></div>
  </div>    
</div>

Hide result

Answer 2

, .