如何在引导程序中对齐按钮工具栏

Question

无论我做什么，我似乎都无法对齐这个按钮工具栏。这就是我的 html 和 css 的样子。我已经尝试了几乎所有方法，但工具栏没有在页面上居中。

 <div class="row center">   
 <div class="btn-toolbar " style="justify-content: center; display: flex;"  role="toolbar"  aria-label="Toolbar with button groups">
     <div class="btn-group mr-2" role="group" aria-label ="First group">
      <button type="button" class="btn btn-secondary" >Pretraži</button>
      <button type="button" class="btn btn-secondary">Poništi pretragu</button>
      <button type="button" class="btn btn-secondary">Snimi Excel</button>
      <button type="button" class="btn btn-secondary">Snimi PDF</button>
      <button type="button" class="btn btn-secondary">Novo  fizičko lice</button>
    </div>
</div>
</div>

这是css

  .btn {
    margin: 3rem; 
padding-left: 0px;
     background-color: blue;
        width: 160px;
        height: 50px; 
         display: flex;
        flex-direction: row;
    justify-content: center;
        align-content: center;
    }
    .btn-toolbar {
        text-align: center;
        justify-content: center;
        align-content: center;
        margin: 0;
    }

Answer 1

.row{
  width:100%;
  border: 1px solid black;
}
.btn {
  padding-left: 0px;
  background-color: blue;
  width: 160px;
  height: 50px;
}

.btn-group {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: center;
}

 <div class="row center">   
 <div class="btn-toolbar" role="toolbar"  aria-label="Toolbar with button groups">
     <div class="btn-group mr-2" role="group" aria-label ="First group">
      <button type="button" class="btn btn-secondary" >Pretraži</button>
      <button type="button" class="btn btn-secondary">Poništi pretragu</button>
      <button type="button" class="btn btn-secondary">Snimi Excel</button>
      <button type="button" class="btn btn-secondary">Snimi PDF</button>
      <button type="button" class="btn btn-secondary">Novo  fizičko lice</button>
    </div>
</div>
</div>