NavbarのPesticide問題

前提

前回に引き続き、こちらのサイトを模写しています。
https://code-step.com/demo/html/blog/#

実現したいこと

Navbarの部分が一見同じように見えるのですが、Toggle Pesticideを使うと見本と私ので枠がかなり違うのでどう改善できるかアドバイスをいただきたいです。

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

左が見本
右が私が作っているサイトです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>Blog</title>
9
10  <!-- FAVICON -->
11  <link rel="icon" href="images/favicon.ico" id="favicon">
12  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
13
14  <link rel="stylesheet" href="styles.css">
15
16  <!-- Bootstrap CSS -->
17  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
18    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
19
20  <!-- Bootstrap Javascript(jQuery含む) -->
21  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
22    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
23  </script>
24  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
25    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
26  </script>
27  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
28    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
29  </script>
30
31
32</head>
33
34<body>
35
36  <!--NABVAR -->
37  <nav class=" navbar navbar-light bg-white">
38    <a href="#" class="navbar-brand">Travel Blog</a>
39  </nav>
40
41
42  <!-- <nav class=" navbar navbar-dark bg-dark "> -->
43    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
44    <div class="justify-content ">
45      <!-- <ul> -->
46        <li><a href="#" class="navbar-brand">NEW</a></li>
47        <li><a href="#" class="navbar-brand">COLUMN</a></li>
48        <li><a href="#" class="navbar-brand">SERIES</a></li>
49        <li><a href="#" class="navbar-brand">Q&A</a></li>
50        <li><a href="#" class="navbar-brand">CONTACT</a></li>
51      </ul>
52    </div>
53
54
55  </nav>
56
57
58  <!-- HEADER -->
59
60
61  <!-- MAIN -->
62
63
64  <!-- SIDEBAR -->
65
66
67  <!-- ①Name Name -->
68
69  <!-- ②Ranking -->
70
71  <!-- ③Archive -->
72
73
74
75
76  <!-- FOOTER -->
77
78  <!-- About -->
79
80  <!-- Menu -->
81
82  <!-- Twitter -->
83
84  © Travel & Blog
85
86  <script src="index.js"></script>
87</body>
88
89</html>

css
1
2.navbar-brand {
3    margin: 0;
4    padding: 0; 
5    display: flex;
6} 
7
8.justify-content {
9    display: flex;
10}
11
12.justify-content li {
13    text-align: left;
14    
15}
16