airbnbのボタンを作りたい

プログラミング初心者でairbnb のhpを模写しています。
このサイトのログインボタンの仕組みがよくわかりません。
教えてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>airbob</title>
7  <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
8  <link rel='stylesheet' href='./style.css'>
9  <script src="https://kit.fontawesome.com/e178190d07.js" crossorigin="anonymous"></script>
10  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
11</head>
12<body>
13    </div>
14    <header>
15      <ul>
16        <li><i class="fab fa-airbnb fa-2x"></i></li>
17        <li>概要</li>
18        <li>準備</li>
19        <li>安全</li>
20        <li>マネープラン</li>
21        <button  typy="button" ><li class="login" >はじめる</li></button>
22      </ul>
23    </header>
24</body>
25</html>

scss
1@charset "utf-8";
2
3header{
4  height: 82px;
5  ul{
6    display: flex;
7    align-items: center; 
8    width: 100%;
9      
10    li{
11      list-style: none;
12      padding: 0px 15px 0 15px;
13      font-size: 14px;
14      color: #484848;
15      font-family: inherit;
16      }
17    
18      }
19    
20  }
21
22
23.fa-airbnb{
24  color: #008489;
25  padding-left: 30px;
26  
27}
28
29 li.login{
30    background-color: #FF385C;
31    color: white;
32    padding: 5px 15px;
33    border-radius: 4px; 
34    margin-top: 26px;
35    margin-bottom: 26px;
36    display: flex;
37    text-decoration: none;
38    margin-left: auto;
39    margin-right: 30px;
40  }
41
42

m.ts10806

2020/05/19 10:46

まず、やってみるところからでしょう。それに目の前にお手本があるならそのサイトのコード見てみれば良いのでは？「見ていけない」という制約があるのでしたら、質問するのも同じですよ。

shu142

2020/05/19 10:55

ご指摘ありがとうございます。調べても分からず、サイトのコードをみてもよく分からず、行き詰まっていたので質問しました。最初に質問するときに書いておいた方が良かったですね。すみません。

m.ts10806

2020/05/19 11:06

質問は編集できます。書いてないことを読み取ることは他人には不可能ですので、適宜加筆修正してください。

shu142

2020/05/19 11:12

わかりました。

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

回答1件

こんにちは。

flex-growで伸ばしてみてはいかがですか？

css
1header{
2  height: 82px;
3  ul{
4    display: flex;
5    align-items: center; 
6    width: 100%;
7
8    li{
9      list-style: none;
10      padding: 0px 15px 0 15px;
11      font-size: 14px;
12      color: #484848;
13      font-family: inherit;
14
15//追加
16        &:nth-child(5){
17          flex-grow: 1;
18        }
19//追加ここまで
20    }
21
22  }
23
24}