Why is that even after giving the container 100% width, im getting a horizontal scrollbar in the desktop view

I know to make the container not to overflow but I’m still getting the horizontal scrollbar.
For the context I have used flex for the parent here (i.e .container)

I checked if the child elements are the one causing the overflow but that wasn’t true. When I reduce the .container class width to 98% the horizontal scrollbar disappeared, but this is not a appropriate approach as the screen size increases the gap is more visible due to the width being 98%.

So I’ve been trying to remove the horizontal scrollbar but I’m stuck as I’m not sure what the issue is , is it my browser problem or is it because of any error in my CSS?

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .logo{
            padding: 0;
            margin:0;

        }

        @media screen and (min-width:320px) {
            .container {
                display:flex;
                align-items: center;
                flex-direction: column;
                width: 10%;
                height: 100vh;
                padding-top: 5px;
                background-color: rgb(73, 171, 232);
            }

            .container img {
                margin: 0;
                width: auto;
                height: 20px;
                padding:0
            }

            .navigation ul {
                list-style: none;
            }

            .navigation i {
                margin: 10px 0 0 0;
                font-size: .75em;
            }

            .navigation ul a {
                display: none;
            }
        }
        @media screen and (min-width:768px) {
            .container {
                display:flex;
                align-items: center;
                justify-items: center;
                flex-direction: column;
                width: 20%;
                height: 100vh;
                padding-top: 5px;
                background-color: rgb(73, 171, 232);
            }

            .container img {
                justify-content: center;
                align-items: center;
                margin: 0;
                width: auto;
                height: 40px;
                padding:0
            }

            .navigation ul {
                align-items: center;
                list-style: none;
            }
            .navigation li{
                display:flex;
                flex-direction: column;
                align-items: center;
            }

            .navigation i {
                margin: 10px 0 0 0;
                font-size: 1em;
            }

            .navigation ul a {
                display: contents;
                font-size:x-small;
                color: white;
            }
        }
        @media screen and (min-width:1200px) {
            .container {
                display:flex;
                flex-direction: row;
                width: 100%;
                height: 100px;
                padding: 5px 0 0 20px;
                background-color: rgb(73, 171, 232);
            }
            .logo{
                flex-grow:1 ;
            }
            img {
                width: 60px;
                height: 60px;
                padding-right:20px;
            }
            .navigation ul {
                display:flex;
                width: 100%;
                gap: 50px;
                margin:0;
                list-style: none;
            }
            .navigation li{
                margin-right: 20px;
                display:flex;
                flex-direction: row;
                justify-content: end;

            }

            .navigation i {
                margin: 10px 0 0 0;
                font-size: 1.5em;
                margin-bottom:10px ;
                padding: 2px;
            }

            .navigation ul a {
                display: none;
                font-size: medium;
                color: white;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="logo">
            <img src="https://shmector.com/_ph/13/188552034.png"
                alt="logo">
        </div>
        <!-- <div class="nav"> -->
        <nav class="navigation">
            <ul>
                <li><i class="fa fa-home" aria-hidden="true"></i><a href="#">Home</a></li>
                <li><i class="fa fa-address-book" aria-hidden="true"></i><a href="#">Address</a></li>
                <li><i class="fa fa-phone-square" aria-hidden="true"></i><a href="#">Contact</a></li>
                <li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="#">Product</a></li>
                <li><i class="fa fa-arrows-h" aria-hidden="true"></i><a href="#">goto</a></li>

            </ul>
        </nav>
        <!-- </div> -->
    </div>
</body>

You need to sign in to view this answers