前提・実現したいこと

ポートフォリオ用のWebサイト制作中となります。
現時点、ナビメニューが中央辺りにあるのですが、右寄せしたい内容となります。
また、レスポンシブ時でも表示してほしいです。

ヘッダーの（img画像と、h2は）このまま左寄せでお願いいたします。

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

ナビメニュー（home,Work,contact）を右寄せにしようと、
text-aligin:right , float:right を書いてみましたが、中央から動きません。

#該当のソースコード

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    <meta name="description" content="初めての制作物作成">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title> portfolio</title>
9
10    <!-- CSS -->
11    <link href="css/ress.css" rel="stylesheet" type="text/css">
12    <link href="css/style.css" rel="stylesheet" type="text/css">
13    <link rel="icon" type="image/png" href="images/k0501_2.png">
14
15</head>
16<body>
17    <div id="home" class="big-big">
18        <header class="page-header wrapper">
19            
20            <h1><a href="index.html"><img class="logo" src="images/プログラムアイコン.png" alt=" portfolio"></a></h1>
21                <h2>ん</h2>
22            <nav>
23                <ul class="main-nav">
24                    <li><a href="home.html">Home</a></li>
25                    <li><a href="work.html">Work</a></li>
26                    <li><a href="contact.html">Contact</a></li>
27                </ul>
28            </nav>
29        </header>
30
31        <div class="home-content wrapper">
32            <h2 class="page-title">はじめまして！<br>んです。</h2>
33            <a class="button" href="contact.html">お問い合わせ</a>
34        </div>
35    </div>
36</body>
37</html>
38

css
1@charset "UTF-8";
2
3html{
4    font-size: 100%;
5}
6a{
7    text-decoration: none;
8}
9img{
10    max-width: 100%;
11}
12/* ヘッダー */
13.logo{
14    width: 100px;
15
16}
17.main-nav{
18    display: flex;
19    list-style: none;
20
21}
22
23.main-nav li{
24    margin-left: 36px;
25    display: inline;
26}
27.main-nav a{
28    color:red;
29    float:right;
30}
31.main-nav a:hover{
32    color:blue;
33}
34.page-header{
35    display: flex;
36
37
38}
39.page-header h2{
40    float: left;
41    padding-top:30px;
42    
43}
44
45.wrapper{
46    max-width: 1100px;
47    margin:0 auto;
48    padding: 0 4%;
49}
50/* ホーム */
51.home-content{
52    text-align: center;
53    margin-top: 10%;
54}
55.page-title{
56    font-family: 'philosopher' ,serif;
57    margin:40px;
58}
59
60.button{
61    background:skyblue;
62    color:white;
63    padding:20px 20px;
64    border-radius: 5px;
65}
66.button:hover{
67    background-color: steelblue;
68}
69.big-big{
70    background-size: cover;
71    background-position: center top;
72    background-repeat: no-repeat;
73}
74#home{
75    background-image: url(../images/cropYamasha181026002.jpg);
76    min-height: 100vh;
77    overflow: hidden;
78}
79
80@media (max-width:600px){
81    h1{
82        color:green;
83    }
84}

試したこと

.main-nav{
    display: flex;
    list-style: none;
    padding-left:500px;
}

上記で、自身が望んでいた内容、右寄せが出来ているのですが、
レスポンシブ用に、幅を狭めるとナビメニューが表示されなくなってしまいます。
ご教示いただけないでしょうか。
宜しくお願いいたします。

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

回答1件

ベストアンサー

padding-left: 500px;という形で、固定値にしているのがよくないと考えます。
display: flex;を指定した.page-headerの子要素にmarginの指定をするのが良いと考えます。

CSS
1.page-header nav {
2    margin-left: auto;
3}

(上記を採用する場合、.main-navへのpadding-left: 500px;は削除してください。)

投稿2020/03/07 12:22

編集2020/03/07 12:35

new1ro

総合スコア4528

toshiran

2020/03/07 13:35

autoについては考えていませんでした。勉強になります。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

ナビメニューを右寄せにしたい

前提・実現したいこと

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

試したこと

関連した質問