Why do overflow: hidden; leaves a white space CSS?

Question

I'm using the property overflow: hidden; to mask the child element. However, it leaves a white space like this:

Here's the code:

<!-- Templates/Test.html -->
<html>
     <style>
          body{
               background: #222;
          }

          *{
               margin: 0;
               padding: 0;
          }
     
          a{
               text-decoration: none;
               color: #000;
          }

          #nav-container{
               position: fixed;
               right: 0;
               width: 550px;
          }

          #sublink-container{
               padding: 0 50px;
               border-radius: 0.5em;
               background: #fff;
               float: right;
               margin: 30px 5px 0 0;
               position: relative;
               font-size: 30px;
               overflow: hidden;
               font-family: sans-serif;
               font-weight: 300;
          }
          #sublink-container span{
               content: '';
               width: 22px;
               height: 100%;
               position: absolute;
               top: 0;
               right: 0;
               background: red;
          }
          #sublink-container div ul{
               text-align: right;
               list-style-type: none;
          }
          #sublink-container li{
               margin: 15px 0;
          }
     </style>

     <body>
          <div id="nav-container">
               
               <div id="sublink-container">
                    <div>
                         <ul>
                              <a><li>Lorem Ipsum -</li></a>
                              <a><li>Lorem Ipsum -</li></a>
                              <a><li>Lorem Ipsum -</li></a>
                         </ul>
                    </div>
                    <span></span>
               </div>
          </div>
     </body>
     
     <script>
          
     </script>
</html>

What's the solution to this?

you can see this post :- https://stackoverflow.com/a/21339836/15238330 — Sadhin, Jul 18 '21 at 07:20
FYI: your HTML is invalid, list items have to be direct descendants of (unordered) lists. — Roy, Jul 18 '21 at 07:22
Did you see this in safari? Because when I saw in safari, I could see the whitespace. But when I saw in chrome and firefox, it worked just fine. I don't know why — Syed Basim, Jul 18 '21 at 07:45

score 0 · Answer 1 · answered Jul 18 '21 at 07:33

padding: 0px 50px in #sublink-container change to

 #sublink-container{
           padding: 0 25px;
           border-radius: 0.5em;
           background: #fff;
           float: right;
           margin: 10px 1px 0 0;
           position: relative;
           font-size: 30px;
           overflow: hidden;
           font-family: sans-serif;
           font-weight: 300;
      }

Why do overflow: hidden; leaves a white space CSS?

1 Answers1