flexを使って一部要素を右寄せにしたいです。

Question

前提・実現したいこと

初心者の質問で失礼します。
flexを使ってバナーを横並びにしましたが、左寄せになっているのを
一部右寄せにして幅をそろえたいのですが、ここからどのような修正を加えたら
いいでしょうか？
アドバイスいただけると助かります。よろしくお願いします。

該当のソースコード

<div class="l-header__inner l-inner">

      <h1 class="l-header__logo c-logo">バナー１  </h1>  
      <div class="header-bn">
          <img src="""　バナー２> 
              </div>
              <div class="header-bn">
               <img src=""　バナー３>
              </div>
              
    </div>

<style type="text/css">
.l-inner {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 92.1875%;
    max-width: 1180px;
}

.l-header__inner {
    display: flex; /* 横並びに */
    align-items: flex-end;
    height: 100px;
    position: relative;
    padding-bottom: 15px;
}

.c-logo {
    display: flex;/* 横並びに */
    font-weight: 700;
}

.header-bn {
    margin-left: 10px;
}


</style>

補足情報（画像添付）

Comments

[yu-smc]

HTMLは正しく記述をお願いいたします（状況の再現ができません。）

やりたいことは、バナー１とバナー２を左寄せに、バナー３を右寄せするということであっていますか？
であればHTML構造から改善が必要なので、まずはコードの修正からお願いいたします。

[momori]

はい。バナー１、バナー２を左寄せに、バナー３を右寄せであっています。
ＨＴＭＬの構造から間違ってるんですね。すみません。

Answer 1

.l-header__inner > *:last-child {
  margin-left: auto;
}

Answer 2

上記のコードだと画像の通りにはならないので、若干なんともいえない部分がありますが、画像を基準としての回答です。

下記を追記でいけませんか。

http://degitekunote.com/blog/2014/12/05/css3-display-flex/

.l-header__inner  {
    justify-content: center;
｝