comment rendre l'enfant dans flex toute la largeur?

J'ai commencé à l'aide de flex et je suis amoureuse de la façon dont il fonctionne.

Je suis à l'aide de flex mise en page et je veux le btn-group classe à l'intérieur de dashboard-body aller toute la largeur de la société mère. Droit maintenant, sa largeur est égale à deux boutons largeur de l'ensemble.

Ce que je veux faire ici, c'est que je veux ajouter un espace entre le bouton et je ne veux pas utiliser la marge de droite ou de gauche. Je veux le btn-group div aller totalité de la largeur de son parent dashboard-body afin que je puisse utiliser le flex de la propriété align-content: space-between d'avoir suffisamment d'espace entre les deux boutons.

Est-il bettwe façon autre que l'ajout de la marge/rembourrage autour des boutons à faire de même.

Grâce.

Voici le code:

CSS:

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

HTML:

<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>