ヘッダーの中の要素を左右に分けたいです

前提・実現したいこと

isaraというLPの模写をしています。見本と同じようにヘッダーを組み立てたいです。
ヘッダーの中の要素header-leftとheader-rightにそれぞれtext-align: left;、
text-align: right;を適用しました。しかし思った通りには行きませんでした。
display: flex;やdisplay: inline-block;を試しましたが駄目でした。
解決方法を教えてほしいです。

該当のソースコード

html
1<header>
2        <div class="header-in">
3            <div class="header-left">
4                <img src="isara_img/isaralogo.png" alt="isara">
5                <p>バンコクのノマドエンジニア育成講座</p>
6            </div>
7            <div class="header-right">
8                <p>お問い合わせ / 資料請求はこちら</p>
9            </div>
10        </div>
11    </header>

css
1header {
2    
3    position: fixed;
4    width: 100%;
5    background-color: #fff;
6    top: 0;
7    
8}
9
10.header-in {
11    width: 100%;
12    display: flex;
13    text-align: left;
14}
15
16.header-left {
17    display: flex;
18    text-align: left;
19}
20
21.header-logo {
22    width: 150px;
23    height: auto;
24}
25
26.header-right {
27    text-align: right;
28}

補足情報

これが実際の画像です。
ヘッダーとその下にあるはずの要素がかぶっているのは、ヘッダーの高さを指定していない、かつヘッダーにposition: fixed;をしているからということで合ってますか？

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

回答2件

ベストアンサー

text-align はテキスト（インライン要素）対象ですので用途が違います。

Flexbox を使って横並びしているなら、Flexbox の justify-content で水平位置のレイアウトを決めるといいでしょう。

css
1.header-in {
2  width: 100%;
3  display: flex;
4  justify-content: space-between; /* 水平両端配置 */
5  align-items: center;            /* 垂直中央配置 */
6}
7
8.header-left {
9  display: flex;
10  align-items: flex-end; /* 垂直下端配置 */
11}
12.header-left p {
13    padding-bottom: 7px;
14}
15
16.header-logo {
17  width: 150px;
18  height: auto;
19}

投稿2021/01/06 01:55

hatena19

総合スコア34073

模写なんですから、まるっとコピーすればいいと思いますが……？

模写元では絶対配置しているようです。

css
1.header-right {
2	cursor: pointer;
3	position: absolute;
4	right: 0px;
5	top: 16px;
6	color: #fff;
7	padding: 11px 40px;
8	background-color: #da6b64;
9	border-radius: 25px;
10}