响应式导航栏响应问题

Question

okay so, im trying to make my navigation bar responsive and im having some troubles

my html and my css

     @media (max-width: 600px) {
        .toggle-btn {
            display: flex;
        }

        .logo {
            display: none;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .row ul {
            display: flex;
            flex-direction: column;
        }
    }

     <header>
            <div class="container">
                <a href="" class="toggle-btn">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="row">
                    <a href="index.html" class="logo"><img src="myLogo.png"></a>
                    <nav>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Work</a></li>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                    </nav>
                </div>  
            </div>
        </header>

okay so, i made the li's display in a column so far. And now i want to get them to the center of the page. And i have tried so so much like justify-content: center; and justify-items: center; and text-align center; i dont know how to do this could someone help please?

Thanks :)

Answer 1

align-items: flex-start; should be align-items: center;

I would suggest going through a few articles on Flexbox, this would be a good start.