snsボタンを含めたナビゲーションの配置

Question

ナビゲーションメニューで下記のような配置にしようとしています。

htmlとcssを作成したのですが、ナビゲーションが縦に伸びてしまったり、画像だけの幅が大きくなってしまいます。
どのような書き方をすれば理想のレイアウトになるのでしょうか。

    <div class="wrapper">
        <header>
            <nav>
                <ul>
                    <li>
                        <a href="">サンプル1</a>
                    </li>
                    <li>
                        <a href="">サンプル1</a>
                    </li>
                    <li>
                        <a href="">サンプル1</a>
                    </li>
                    <li>
                        <a href="">サンプル1</a>
                    </li>
                    <li>
                        <a href="">サンプル1</a>
                    </li>
                </ul>
            </nav>
            <div class="sns">
                <a href=""><img src="img/instagram.png" alt="instagram"></a>
                <a href=""><img src="img/facebook.png" alt="facebook"></a>
                <a href=""><img src="img/twitter.png" alt="twitter"></a>
            </div>
        </header>
    </div>

a {
    text-decoration: none;
    display: block;
    font-size: inherit;
    color: #432;
}
li {
    list-style: none;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 9%;
}
header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav {
    margin: 0 auto;
}

header nav ul {
    display: flex;
}

nav li {
    padding: 0 20px;
}

.sns {
    display: flex;
}

.sns img {
    width: 10%;
}

Comments

[Lhankor_Mhy]

「理想のレイアウト」とはどんな感じですか？
「画像だけの幅が大きくなってしまいます。」とのことですが、どのような幅が理想なのでしょうか？

Answer 1

ナビゲーションが縦に伸びてしまったり

他の条件は詳細が不明なので、とりあえずこれだけ実現します。
サンプル

nav li {
    padding: 0 20px;
    width: max-content; /* 追加 */
}

.sns img {
    /* width: 10%; */
    width: 100%;
}