Como separar essa parte?

Estou criando meu portifolio e gostaria de saber como separar os itens d projetos 

    <header class="header-portfolio">
        <nav class="header__menu">
            <a class="header__menu__link menu" href="index.html">Home</a>
            <a class="header__menu__link menu" href="about.html">About me</a>

            <div class="container">
                <!-- PROJETOS COM A LISTA DE PROJETOS -->
                <input type="checkbox" id="projetos" class="container__botao__projetos">
                <label for="projetos">
                    <span class="projetos__container menu">Projects</span>
                </label> 

                <ul class="lista__projetos menu">
                    <li class="lista__projetos-item">Featured Projects </li>
                    <li class="lista__projetos-item">Student Projects</li>
                    <li class="lista__projetos-item">Underway Projects</li>
                    <li class="lista__projetos-item">Personal Projects</li>
                </ul>
                
            </div>

            <a class="header__menu__link" href="habilidades.html">Skills</a>
        </nav>
    </header>

:root {
    --fundo: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
    --color-primary: #123456;
    --color-secondary: #FFF;
    --azul-royal: #144480;
    --fundo-card: rgba(20, 68, 128, 0.30);
    --lils: #B872FF;
    --linear-botes: linear-gradient(180deg, #B872FF 0%, #144480 100%);

}

*{
    box-sizing: border-box;
    max-width: 100%;
}

body{
    background: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%) no-repeat;
    min-height: 100vh;
}

.header__menu {
    display: flex;
    justify-content: center;
    background: var(--azul-royal);
    border-radius: .5rem;
    border: 0.2rem solid var(--azul-royal);
    color: var(--color-secondary);
    gap: 80px;
    margin:1rem;
    padding: 1.4rem;
    font-size: 1.5rem;
    font-style: normal;
    font-family: 'Unbounded', cursive;
}

.header__menu__link{
    text-decoration: none;
    color: var(--color-secondary);

}

.lista__projetos {
    display: none;
}


/* CRIAR UM POSITION ABSOLUTE */
.container__botao__projetos:checked~.lista__projetos {
    display: block;
}

.menu::placeholder {
    color:var(--color-primary);
}