要素の右寄せ固定方法

Question

前提・実現したいこと

下記画像①のマイページボタンを図のようにwidth800pxに合わせて右寄せ固定したい

発生している問題・エラーメッセージ

800pxの範囲内で右寄せされず中央や範囲外にでてしまう

ソースコード

• HTML

    <div class="headbtn">
      <p>※予約変更、キャンセルはこちら</p>
      <a href="https://www.~~~" class="header_top">マイページ</a>
    </div>
  </div>
  <div class="wrapper">
    <div class="top">
      <!-- <a href="https://www~~~p" class="header_top"><img src="./complete_files/van.png"></a> -->
      <h1 class="tenpo">VAN COUNCIL SELECT</h1>
    </div>
    <div class="naiyou"><span>ご予約ありがとうございました</span></div>
    <div class="regi_conp">
      <div class="regi_conp_1">
        <p>予約が完了しました<br>キャンセルはマイページから行えます</p>
      </div>
    </div>
    <div class="seni"><a href="https://www~~~">マイページへ</a></div>
  </div>

• CSS

.header {
    width: 800px;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    z-index: 9999;
}

.headbtn {
    width: 25%;
    line-height: 30px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.headbtn p {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 5px;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.headbtn a {
    display: block;
    margin-left: auto;
    width: 60%;
    text-decoration: none;
    background: #3F85B5;
    text-align: center;
    border: 2px solid #3F85B5;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    transition: all 0.3s ease;
}
a {
    outline: none;
}
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

試したこと

margin-left:auto で右寄せ
justyfy-content の右寄せ

ここに問題に対して試したことを記載してください。

Comments

[Lhankor_Mhy]

ご提示のHTMLに .header がありませんが、ご提示のコードが .header 直下、という理解で合っていますか？

Answer 1

左右のマージンをautoにすると中央寄せになります。右を消してはどうでしょうか。

    .headbtn {
      width: 25%;
      line-height: 30px;
      /*margin-right: auto;*/
      margin-left: auto;
      text-align: center;
    }