HTML、cssに関する質問

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
htmlを勉強し始めたばかりの学生です。ホームページのレイアウトに関する質問です。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

header内　横並びしているlist を　半分分けて　両サイドに配置すること

該当のソースコード

Htmlコード
<header>
  
    <ul>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">mypage</a></li>
      <li><a href="#">ログイン</a></li>
    </ul>
</header>

### 試したこと
色々試しましたが　思う通りにいかないです。
下のCSSコードは平均にヘッド欄に配置することになっています。
header ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
色々試しましたが　思う通りにいかないです。
解決方法をご存じの方がいましたら、ご教授頂けると幸いです。
よろしくお願いいたします。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

タイトルに内容がないです。要件を記載してください（質問タグを繰り返してるだけになっています）

あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[m.ts10806]

また、文章だけでは完成イメージが確実に伝わらない可能性もあります。
完成イメージを図示してください。

[UFO2088]

質問のしかたについて　アドバイスしていただき　ありがとうございます。
次回　もっと正確に　伝えるように　がんばります。
よろしくお願いいたします。

[m.ts10806]

質問は編集できるので内容調整いただけたらと

Answer 1

両サイドに分けるには、justify-contentにflex-startまたはflex-endを指定して、区切りとなる要素にmargin-right: auto;またはmargin-left: auto;としてやるとうまくいきます。

<header>
	<ul>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">お問い合わせ</a></li>
	<li class="ms-auto"><a href="#">mypage</a></li>
	<li><a href="#">ログイン</a></li>
	</ul>
</header>

header ul {
	list-style: none;
	display: flex;
	justify-content: flex-start;
	padding: 10px;
}

header ul a {
	/* 以下の数値はご参考までに */
	padding: .25rem .5rem;
	margin-left: .5rem;
	margin-right: .5rem;
}

.ms-auto {
	margin-left: auto;
}

Comments

[UFO2088]

うまく　いきました。
大変助かりました。
ありがとうございました。