buttonを右端に移動したい

前提・実現したいこと

bootsstrapまたはcssを使ってbuttonを右端に移動したい

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

buttonの位置が変わらない

該当のソースコード

html↓
ソースコード

<header> <div class="header-in"> <table> <tr> <div class="title"> <td> <div class="logo"> <img class="logo" src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="iSara"> </div> </td> <td> <div class="subtitle mr-auto"> <p>バンコクのノマドエンジニア育成講座</p> </div> </td> </div> <td> <div class="headcontact"> <div class="contact text-right"> <button class="btn header-button"> お問い合わせ / 資料請求はこちら </button> </div> </div>

        </td>
    </tr>
  </table> 
</div>

</header>

css↓

p, h2{
margin-bottom: 0px;
text-align: center;
line-height: 30px;
}
ul {
list-style: none;
}

.btn {
color: #fff;
background-color: #da6b64;
}

.header-in {
margin-bottom: 2rem;
}

.subtitle p {
margin-top: 16px;
font-size: 0.5rem;
font-weight: 600;
line-height: 1rem;
}
.logo img {
width: 123px;
}
.header-button {
padding: 10px 30px 10px 30px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 1px;
border-radius: 20px;
}
.headercontact {
text-align: right;
}

試したこと

Bootstrapのクラスml-auto,mr-autoを試してみたができなかった。

Lhankor_Mhy

2020/09/26 11:52

CSSを使わずに書いているのですか？

suto_michimasa

2020/09/26 11:55 編集

いえ、cssも使っております。 cssのコードも追加します????‍♂️

ex025

2020/09/26 16:00

コードはコードブロックを使って書いてください。 ```HTML <header> ... </header> ``` のような形式です。 HTML、CSS共に修正して欲しいです。その方が回答者が見やすいので。

行動規範の内容に同意します

回答1件

ベストアンサー

.header-in内の要素をtableタグで囲んでしまったら、bootsstrapの指定は無意味になります。
レイアウトをtableで決めるという手法は完全に時代遅れです。
まずは、table, tr, td タグを削除しましょう。

bootsstrap を使うなら、横並びは class に row を設定するだけです。そうすれば、ml-auto, mr-auto も効きます。

html
1<header>
2  <div class="header-in container">
3    <div class="title row">
4      <div class="logo">
5        <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="iSara">
6      </div>
7      <div class="subtitle mr-auto">
8        <p>バンコクのノマドエンジニア育成講座</p>
9      </div>
10      <div class="headcontact">
11           <button class="btn header-button">
12            お問い合わせ / 資料請求はこちら
13          </button>
14      </div>
15    </div>
16  </div>
17</header>