Right align buttons inside flex

Question

How can I align the buttons on the right hand side to the right (the right side of the orange box in the image)?

[Visual of the button element not aligned to the right][1] [1]: https://i.stack.imgur.com/kAi2y.png

HTML:

<div id="button-container">
  <span>
    <button
      class="btn btn-primary"
      type="submit"
      >{{lex.labelViewLog}}
    </button>
    <button
      class="btn"
      type="button"
      >{{lex.reset}}
    </button>
  </span>
  <span>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.download | titlecase"
      type="button">
      <cds-icon shape="download"></cds-icon>
      <span>{{lex.download}}</span>
    </button>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.print | titlecase"
      type="button">
      <cds-icon shape="printer"></cds-icon>
      <span>{{lex.print}}</span>
    </button>
  </span>
</div>

CSS:

    #button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Answer 1

You can use flexbox also inside this <button class="btn btn-icon btn-primary">

{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

Answer 2

Please use below CSS style:

#button-container{
    display: flex;
    justify-content: flex-end !important;
    }

Answer 3

The issue came down to the .btn class. Clarity adds a 0.6rem margin-right to buttons. I resolved the issue with a style (style="margin-right:0") to override the class CSS:

<button
  class="btn btn-icon btn-primary"
  style="margin-right:0"
  [title]="lex.print | titlecase"
  type="button">
  <cds-icon shape="printer"></cds-icon>
  <span>{{lex.print}}</span>
</button>