justify-content: flex-end を指定したい。

<header></header>内にあるliに対して、justify-content: flex-end;を指定したいです。親要素に対して、display: flex;をつけてあげると子要素がそれに応じて動いてくれることと認識しているため、<ul>に対してdisplay: flex; を指定したもののうまく行きません。何か対処法があればご教授ください。写真のようにしたいです。

説明](d3f1bd8a911d09cbb43590152e1bedb0.jpeg)

html
1  <!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>MyFreeWebsite</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8
9  <body>
10    <div class="container">
11      <header>
12        <h1>30DAYSトライアル</h1>
13          <ul>
14            <li>デイトラとは</li>
15            <li>コース一覧</li>
16            <li>お問い合わせ</li>
17          </ul>
18      </header>
19      <div class="main">
20        <div>1日1題30日でプロのエンジニアになろう</div>
21        <div>毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます。</div>
22      </div>
23  
24      <div class="second">
25        <h2>デイトラとは</h2>
26        <div class="about">
27          <div><img src="images/about.png"></div>
28          <div>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。1日1題30日でプロのWebエンジニアを目指しましょう。
29          </div>
30        </div>
31      </div> <!--.conteiner-->
32      
33  
34      <div>
35        <h2>コース一覧</h2>
36        <ul>
37          <li src="../images/web_first.png">HTML/ CSS/ Bootstrop</li>
38          <li src="../images/web_second.png">HTML/ CSS /Javascript /jQuery</li>
39          <li src="../images/web_third.png">PHP/ WordPress</li>
40        </ul>
41      </div>
42  
43      <div>
44        <h2>お問い合わせ</h2>
45        <div>さあ今日から30日間を始めよう</div>
46        <input type="text" placeholder="メールアドレス">
47        <button>無料で始める</button>
48      </div>
49    </div>
50
51    <script src="js/main.js"></script>
52  </body>
53</html>

css
1.container {
2  font-size: 16px;
3  margin: 0;
4  width: 80%;
5  margin: 0 auto;
6}
7
8header {
9  display: flex;
10  margin-bottom: 15px;
11}
12
13h1 {
14  font-size: 12px;
15}
16
17
18header ul {
19  display: flex;
20  margin: 0px;
21  font-size: 12px;
22  margin-top: 7px;
23}
24
25
26header ul li {
27  list-style: none;
28  margin-left: 10px;
29}
30
31.main {
32  background-image: url(../images/main-vsual-nontitle.png);
33  background-size: cover; 
34}
35
36
37

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

回答1件

ベストアンサー

ulを右寄せにしたい、と認識しました。
以下の記述でいかがでしょうか?

CSS
1header ul {
2  flex: 1 1 0%; /* 横幅いっぱいに引き伸ばす */
3  display: flex;
4  justify-content: flex-end;
5
6  background-color: #f00; /* 仮に、こちらを指定してみるとわかりやすくなるかもしれません。 */
7}