ハンバーガメニュー左寄せについて

前提・実現したいこと

ハンバーガメニューを右寄せにしたい。
ここに質問の内容を詳しく書いてください。
bootstrapを使用しLP作成を行っています。
メニューバーを入力すると、左端にあるロゴの横にきてしまいます。

別件にはなりますが、下記エラーはどのように解消したらよろしいでしょうか、ご教示願います。

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

Tag must be paired, missing: [ </div> ], start tag match failed [ <div id="home"> ] on line 15.(tag-pair)

エラーメッセージ
Tag must be paired, missing: [ </div> ], start tag match failed [ <div id="home"> ] on line 15.(tag-pair)

### 該当のソースコード

```ここに言語名を入力
ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Nuno - Responsive Bootstrap Theme</title>
	<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="css/fixed.css">
</head>

<body data-spy="scroll" data-target="#navbarResponsive">

<!--- Start Home Section -->
<div id="home">

<!--- Navigation -->
<nav class="navbar-expand-md navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="#"><img src="img/nuno.png"></a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
      <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
     <ul class="navbar-nav ml-auto">
          <li class="nav-item">
			  <a class="nav-link" href="#home">Home</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#course">Course</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#features">Features</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#resources">Resources</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#clients">Clients</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#contact">Contact</a>
		  </li>
	  </ul>
	</div>
</nav>
<!--- End Navigation -->


<!--- End Home Section -->

<!--- Start Course Section -->
<div id="course" class="offset">

</div>
<!--- End Course Section -->

<!--- Start Features Section -->
<div id="features" class="offset">

</div>
<!--- End Features Section -->

<!--- Start Resources Section -->
<div id="resources" class="offset">

</div>
<!--- End Resources Section -->

<!--- Start Clients Section -->
<div id="clients" class="offset">

</div>
<!--- End Clients Section -->

<!--- Start Contact Section -->
<div id="contact" class="offset">

</div>
<!--- End Contact Section -->

<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End of Script Source Files -->

</body>
</html>

### 試したこと
mr-auto など試しましたが、改善されませんでした。
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
vs
ここにより詳細な情報を記載してください。

s8_chu

2019/12/31 04:57

ソースコードはコードブロックで囲んでいただけませんか？

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

回答1件

ベストアンサー

<div id="home"> という div 要素の開始タグに対する終了タグが存在しないため、そのようなエラーが発生しています。
.navbar クラスを nav 要素へ付与することで、 justify-content プロパティへ space-between が設定され、各 flex アイテムは flex コンテナの中で主軸方向に均等に配置されます。

How it works

Here’s what you need to know before getting started with the navbar:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

以上 2 点を修正すると、以下のようになり、質問者さんの実現したいことが行えます (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>Nuno - Responsive Bootstrap Theme</title>
8    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
9    <link rel="stylesheet" href="style.css">
10    <link rel="stylesheet" href="css/fixed.css">
11  </head>
12
13  <body data-spy="scroll" data-target="#navbarResponsive">
14
15    <!--- Start Home Section -->
16    <div id="home">
17
18      <!--- Navigation -->
19      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
20        <a class="navbar-brand" href="#"><img src="img/nuno.png"></a>
21        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive">
22          <span class="navbar-toggler-icon"></span>
23        </button>
24
25        <div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
26          <ul class="navbar-nav ml-auto">
27            <li class="nav-item">
28              <a class="nav-link" href="#home">Home</a>
29            </li>
30            <li class="nav-item">
31              <a class="nav-link" href="#course">Course</a>
32            </li>
33            <li class="nav-item">
34              <a class="nav-link" href="#features">Features</a>
35            </li>
36            <li class="nav-item">
37              <a class="nav-link" href="#resources">Resources</a>
38            </li>
39            <li class="nav-item">
40              <a class="nav-link" href="#clients">Clients</a>
41            </li>
42            <li class="nav-item">
43              <a class="nav-link" href="#contact">Contact</a>
44            </li>
45          </ul>
46        </div>
47      </nav>
48      <!--- End Navigation -->
49
50      <!--- End Home Section -->
51
52      <!--- Start Course Section -->
53      <div id="course" class="offset">
54
55      </div>
56      <!--- End Course Section -->
57
58      <!--- Start Features Section -->
59      <div id="features" class="offset">
60
61      </div>
62      <!--- End Features Section -->
63
64      <!--- Start Resources Section -->
65      <div id="resources" class="offset">
66
67      </div>
68      <!--- End Resources Section -->
69
70      <!--- Start Clients Section -->
71      <div id="clients" class="offset">
72
73      </div>
74      <!--- End Clients Section -->
75
76      <!--- Start Contact Section -->
77      <div id="contact" class="offset">
78
79      </div>
80      <!--- End Contact Section -->
81
82    </div>
83    <!--- Script Source Files -->
84    <script src="js/jquery-3.3.1.min.js"></script>
85    <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
86    <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
87    <!--- End of Script Source Files -->
88
89  </body>
90
91</html>
92