Bar not rearranging with flex in css

I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body
{
    background-image: url(background.jpg);
    background-size: cover;
    background-position : center;
    
    font-family: sans-serif;
}

.menu-bar
{
    background: #273044;
    text-align: center;
    height:30px;
     
}
.menu-bar ul
{
    display: inline-flex;
    list-style: none;
    color: #fff;
    
}

.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
 
padding: 5px;  
}

.menu-bar ul li a
{
text-decoration: none;
color: white;   
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;

height:30px;
} 

.toggle-button{
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 31px;
    height: 21px;
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;

}

@media(max-width: 700px){
    .toggle-button{
        display:flex;
    }
    .menu-bar-links{
        /* display:none; */
        width:100%;
    }
    .menu-bar{
        flex-direction: column;
        align-items: flexstart;
    }
    .menu-bar-links ul{
        width:100%;
        flex-direction: column;

    }
    .menu-bar-links li{
        text-align: center;
    }
}


/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

This is my HTML Code:

<html>
    <head> 
        <title> Title of page    </title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
    </head>

<!----header----> 
    <body> 
        <div class="menu-bar">
            <a href = "#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>

            </a>
            <div class="menu-bar-links">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Investors</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Training </a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
     </div>



        <!-- <div class= "grid"> 
            
        </div> -->

    </body>
</html>

This is how it looks when in full screen:

When i rearrange the screen it looks like this: As you can see all the buttons seems to have disappeared except the one which is hovered over

It is also not centering even with

.menu-bar-links li{
        text-align: center;