a horizontal line appear on left side of a popup image as i am using a box-shadow, trouble occured when a flex is enabled

{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    text-align: center;
    
}

.container
{
  
    margin: 0 auto;
    width: 500px;
}

.gallery
{
    width: 500px;
    display: flex;
    justify-content: space-evenly;       
}

.gallery li
{
    list-style: none;
}

.gallery li a
{
    display: flex;
        
}

.overlay
{
    display: flex;    
    justify-content: center;
    position: fixed;
    text-align: center;
    padding: 110px;
    width: 0;
    height: 0;
    overflow: hidden;
    top: 0;
    left: 0;
    border-radius: 0 0 0 0;
    background-color: rgba(0,0,0,0);
    transition: 1s;  
}

.overlay:target
{
    
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;   
    background-color: rgba(0,0,0,.8);
}

.overlay .close
{
    
    color: white;
    font-size: 25px;
    text-decoration: none;
    
}

.overlay img
{  
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.712);  
}

<body>

    <h1>Learn Flexbox</h1>
    <div class="container">
        <ul class="gallery">
            <li>
                <a href="#1">
                <img src="https://i.ibb.co/sQG9gC0/1.jpg">
                </a>
               
                <div class="overlay" id="1"> 
                    <a href="#" class="close">X</a>
                    <img src="https://i.ibb.co/SQY8pvp/1.jpg">
                </div> <!-- end overlay --> 
            </li>

            <li>
                <a href="#2">
                <img src="https://i.ibb.co/tcFHXKx/2.jpg">
                </a>
                
                <div class="overlay" id="2">
                    <a href="#" class="close">X</a>
                    <img src="https://i.ibb.co/8zdgZHc/2.jpg">
                      
                </div> <!-- end overlay -->
            </li>

            <li>
                <a href="#3">
                <img src="https://i.ibb.co/K9BX0Lh/3.jpg">
                </a>
                
                <div class="overlay" id="3">
                    <a href="#" class="close">X</a>
                    <img src="https://i.ibb.co/3zH5Fcq/3.jpg">               
                </div> <!-- end overlay -->
            </li>

            <li>
                <a href="#4">
                <img src="https://i.ibb.co/dbkmm3G/4.jpg">
                </a>        
                <div class="overlay" id="4">
                    <a href="#" class="close">X</a>
                    <img src="https://i.ibb.co/ky01729/4.jpg">           
                </div> <!-- end overlay -->
            </li>
        </ul>
        
    </div><!-- end container -->
</body>