CSSについて~要素の配置~

現在レスポンシブデザイン対応のウェブサイトを設計しているのですが、
ナビゲーションバーのハンバーガーメニューが左側に寄ってしまっています。
これを右側に寄せたいのですが方法がわかりません。
左側に寄ってしまっている原因と右側に寄せる方法についてご教授いただけますでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, intial-scale=1, shrink-to-fit=no">
6    <title>TOP</title>
7    <link rel="stylesheet" href="Hover-master/css/hover.css">
8    <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
9    <link rel="stylesheet" href="Animate.css">
10    <link rel="stylesheet" href="RYMF-TOP.css">
11    <script src="bootstrap-4.3.1-dist/js/jquery.min.js"></script>
12    <script src="bootstrap-4.3.1-dist/js/popper.min.js"></script>
13    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
14</head>
15<body>
16    <div class="container-fruid">
17        
18    <div class="row mb-navbar">
19        <button class="menu-btn" id="mobile-menu"></button>
20        </div>
21    
22        <div class="row navbar">
23            
24            <div class="col-lg-4 col-md-4 col-sm-4"></div>
25            
26            <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">HOME</a>
27            
28            <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">WORK</a>
29            
30            <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">ABOUT</a>
31            
32            <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">CONTACT</a>
33            
34            <div class="col-lg-4 col-md-4 col-sm-4"></div>
35          
36            </div>
37        
38    </div>
39    
40
41    
42</body>
43</html>

CSS
1@charset="utf-8";
2
3.mb-navbar{
4    background-color: black;
5    height: 55px;
6    padding: 0;
7}
8
9.menu-btn {
10    margin: 0 10px 0 0;
11	padding: 10px 0;
12	border: 1px solid #fff;
13	border-radius: 4px;
14	width: 40px;
15	height: 40px;
16	background: url(hamburger.png) no-repeat center center;
17	background-size: contain;
18}
19
20.navbar{
21    text-align: center;
22    background-color: black;
23    line-height: 55px;
24    padding: 0;
25}
26
27.navbar a{
28    color: white;
29    font-size: 12px;
30    margin: 0;
31    padding:0;
32}
33
34.navbar a:hover{
35    color: white;
36    text-decoration: none;
37    font-size: 13px;
38}
39
40@media screen and (min-width:576px){
41    .mb-navbar{
42		display: none;
43	}
44}

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

回答1件

ベストアンサー

ハンバーガーメニューのボタンが左に寄ってるのは、
ボタンを内包している.mb-navbarの幅が、指定されていない（つまり、子要素の幅にフィットするようになっている）からです。

右によせる方法はいくつかあり、それぞれに特徴があるので、自分で調べてどの方法がよいか選んでください。
とりあえず右に表示されれば何でも良いというのであれば、

.mb-navbar{
  width:100vw;
  position:relative;
}
.menu-btn {
  position:absolute;
  right:0;

と書いておけば右に行きます。

投稿2019/09/10 13:17

H40831

総合スコア973

Ryo_VilleC7

2019/09/11 07:18

ありがとうございます！無事解決しました。根本的なところを見逃していたようなので基礎から知識を見直していきたいと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSについて~要素の配置~

関連した質問