Why is my anchor text stacked on top of each other and how do I fix it?

it will help you see here image

//now it will help you 
    <!DOCTYPE html>
    <html>
    <head>
        <title>nested anchor links in divs</title>
        <link rel="stylesheet" href="">
    <style>
        html {
    height: 100%;
    }
    
    body {
    margin: 0;
    height: 100%;
    }
    
    #outer-container {
    display: table;
    width: 100%;
    height: 100%;
    }
    
    #sidebar {
    display: table-cell;
    width: 15%;
    height: 100%;
    vertical-align: top;
    background-color: rgb(68, 68, 68);
    }
    
    #content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
    background-color: gray;
    }
    
    #play {
    background-color: rgb(20, 15, 15);
    color: white;
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    }
    
    #sidebar img {
    padding-top: .5em;
    padding-right: .1em;
    }
    
    #subnav-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 15%;
    width: 300px;
    background-color: black;
    }
    
    #subnav-content a {
    display: flex;
    width:100%;
    align-items:center;
    padding-right: 15em;
    text-align: left;
    text-decoration: none;
    font-size: 13pt;
    color: white;
    margin:10px;
    padding-top:10px;
    }
    #subnav-content a img{
        text-align: center;
    }
    
    /* When you move the mouse over the subnav container, open the subnav content */
    #subnav:hover #subnav-content {
    display: block;
    }
    
    /* First sub nav */
    #chess {
    padding-top: 5px;
    padding-right: 9px;
    }
    
    #live {
    padding-right: 9px;
    }
    
    #daily {
    padding-right: 9px;
    }
    
    #comp {
    padding-right: 9px;
    }
    
    #tourney {
    padding-right: 11px;
    padding-left: 2px;
    }
    
    #four {
    margin-left: -3px;
    padding-right: 4px;
    }
    
    #var {
    margin-left: -8px;
    }
    
    #leader {
    margin-left: -2px;
    padding-right: 5px;
    }
    
    #lib {
    margin-left: -3px;
    padding-right: 6px;
    }
    </style>
    </head>
    
    <body>
        <div id="outer-container">
            <div id="sidebar">
                <div id="subnav">
                    <a href="#" id="play"><img src="images/play logo.webp" alt="play" id="play" height='25px' width='25px'><span>Play</span></a>
                    <div id="subnav-content">
                        <a href="#"><img src="images/play logo.webp" alt="play" id="hand" height='20px' width='20px'>Play</a>
                        <a href="#"><img src="images/live chess icon (1).png" id="live" height="21px" width="21px">Live Chess</a>
                        <a href="#"><img src="images/sun icon (1).png" id="daily" height="21px" width="21px">Daily Chess</a>
                        <a href="#"><img src="images/computer icon (1).png" id="comp" height="23px" width="23px">Computer</a>
                        <a href="#"><img src="images/tournament_icon (1).png" id="tourney" height="22px" width="22px">Tournaments</a>
                        <a href="#"><img src="images/4_player_chess_icon (1).png" id="four" height="27px" width="27px">4 Player Chess</a>
                        <a href="#"><img src="images/chess_variants_icon (1).png" id="var" height="28px" width="36px">Variants</a>
                        <a href="#"><img src="images/leaderboards_icon (1).png" id="leader" height="25px" width="25px">Leaderboard</a>
                        <a href="#"><img src="images/library_icon (1).png" id="lib" height="25px" width="25px">Library</a>
                    </div>
                </div>
            </div>
            <div id="content">
    
    
    
    
            </div>
        </div>
    </body>
    
    </html>


  [1]: https://i.stack.imgur.com/3Z4Jd.png

The padding-right in your CSS is the problem:

#subnav-content a {
display: flex;
padding-right: 15em; < causes your Problem
text-align: left;
text-decoration: none;
font-size: 13pt;
color: white;
}

Remove that and you should be good to go.

In case you run into weird formatting again, I highly recommend using the "Inspect"-Tool provided by most browser. With that, you can see (among other things) each CSS-Rule applied to an individual HTML-element and also turn them off and on again.