CSSでの文字の配置の調節がわからない

前提・実現したいこと」

ポートフォリオサイトを作っています
ヘッダーの文字をオレンジ色の図形の両端に揃えたいです

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

h1タグのxxxxxxxxxの文字の部分が調節できない

該当のソースコード

ソースコード

            <h1 class="name">
                <a href="index.html">xxxxxxxxxxx</a>
            </h1>

            <nav class="h-nav">
                
                <ul>

                    <li>

                        <a href="#">HOME</a>

                        <a href="#">PROFILE</a>

                        <a href="#">PROFILE</a>

                        <a href="#">CONTACT</a>


                    </li>

                </ul>


            </nav>


        </header>

<css>

header {

width: 100%;
padding: 40px 4% 10px;
background-color: rgba(219, 196, 76, 1);

position: fixed;

display: flex;
align-items: center;

}

h1 {

margin: 0; 
padding: 0;
font-size: 15px;

}

a {

text-decoration: none;
color: fff;

}

ul {

list-style: none;
margin: 0;
display: flex;

}

nav {

margin:20 150 0 846;

}

li {

margin: 0 0 0 15px;
font-size: 15px;

}

試したこと

marginをいじってみたのですがうまくいきませんでした

補足情報（FW/ツールのバージョンなど）

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

回答1件

実現したいことがあいまいでよくわかりませんが
「いちばんはじに寄せたいのに寄らない」ということであれば
headerにpaddingがついているからではないでしょうか
それであれば4%を0に書き換えれば寄りますよ

投稿2021/07/24 19:26

MikenekoSamane

総合スコア102

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

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

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