Using percentages with padding makes elements go off screen

Question

Whenever I set a percentage for padding the elements go off screen, but this never occurs when using px or rem or anything else. I'm trying to work with percentages to be able to make responsive pages.

I'm also having a problem with height padding, when I add height to either of the UL items, the other UL items end up inheriting the same padding height even though it has a padding height of it's own.

To be clear, the height issue happens on both percentages and px

I've added 2 snippets for each of the cases, Thanks in advance!

Edit: Please run the snippets in full screen!

here's my px padding:

a {
    text-decoration: none;
    }

    li {
    list-style: none;
    }

    header {
        position: fixed;
        width: 100%;
        background-color: #0a15135e;
    }

    .container {
        display: flex;
        justify-content: space-between;
    }

    .container ul {
        display: flex;
    }

    header .social-icons li {
        background-color: #ffffff3e;
        padding: 10px 25px;
        margin: 1vh 1vw 1vh 1vw;
    }

    header .nav-links li {
        background-color: #ffffff3e;
        padding: 30px 20px;
        margin: 1vh 1vw 1vh 1vw;
    }

            <header>
                    <div class="container">
                        <ul class="social-icons">
                            <li class="social-header-facebook"><a href=""></a></li>
                            <li class="social-header-instagram"><a href=""></a></li>
                            <li class="social-header-twitter"><a href=""></a></li>
                        </ul>
                        <ul class="nav-links">
                            <li class="nav-li"><a href="#">Home</a></li>
                            <li class="nav-li"><a href="#">Policy</a></li>
                            <li class="nav-li"><a href="#">About</a></li>
                            <li class="nav-li"><a href="#">Contact</a></li>
                        </ul>
                    </div>
            </header>

here's my percentage padding:

        a {
        text-decoration: none;
        }

        li {
        list-style: none;
        }

        header {
            position: fixed;
            width: 100%;
            background-color: #0a15135e;
        }

        .container {
            display: flex;
            justify-content: space-between;
        }

        .container ul {
            display: flex;
        }

        header .nav-links li {
            background-color: #ffffff3e;
            padding: 2% 3%;
            margin: 1vh 1vw 1vh 1vw;
        }


        header .social-icons li {
            background-color: #ffffff3e;
            padding: 4% 70%;
            margin: 1vh 1vw 1vh 1vw;
        }

    <header>
                        <div class="container">
                            <ul class="social-icons">
                                <li class="social-header-facebook"><a href=""></a></li>
                                <li class="social-header-instagram"><a href=""></a></li>
                                <li class="social-header-twitter"><a href=""></a></li>
                            </ul>
                            <ul class="nav-links">
                                <li class="nav-li"><a href="#">Home</a></li>
                                <li class="nav-li"><a href="#">Policy</a></li>
                                <li class="nav-li"><a href="#">About</a></li>
                                <li class="nav-li"><a href="#">Contact</a></li>
                            </ul>
                        </div>
                </header>