[Flex Box no header]

div class="estrutura">
    <header class="header">
        <a href="#" class="logo">
            <img src="wildbeast.svg" alt="Logo">
        </a>
 
        <nav class="navegacao">
            <ul>
                <li><a href="#">sobre</a></li>
                <li><a href="#">animais</a></li>
                <li><a href="#">contato</a></li>
            </ul>
        </nav>
    </header>

Na class "estrutura" eu defini o grid e as colunas. Depois, na class "header" eu fui definir como flex para organiza-lo com esse display, porém a imagem "logo" desaparece e as propriedades flex não funcionam, nenhuma delas. Ex:

.estrutura{
   display: grid;
   grid-template-columns: minmax(160px, 1fr) 3fr 300px;
   grid-template-areas: 
       'header header header'
       'sidenav content anuncios'
       'rodape rodape rodape'
   ;
 }

.header{
   display: flex;
   grid-area: header;
   background-image: linear-gradient(to right, #8844ee, #B07DFB);
   padding: 30px;
}