[Dúvida] Challenge 1 - Não consigo fazer a logo desaparecer no menu mobile

Boa tarde meu amigo! Tudo bem? Dei uma olhada no seu código, e a primeira coisa que aconselho a mudar, é adicionar o border box no seu reset:

• { box-sizing: border-box; }

E em relação ao seu problema:

a imagem não vai receber nem mudar a opacidade, então recomendo dar um: width: 0px;

Boa tarde!

Irei fazer a adição do box-sizing no meu reset.css, não o conhecia. Obrigado.

A opacidade da imagem não está sendo o problema. O meu problema está sendo o seguinte:

O códido a seguir não funciona pois o elemento com id="search" está aparecendo no html após o elemento com class="header__logo"

#search:checked ~ img.header__logo {
    display: none;
}

    <header class="header">
        <div class="container header__container">
            <img class="header__logo" src="./assets/img/Logo.svg" alt="Logo da AluraDev">

            <div class="header__menu">
                <input type="checkbox" id="search" class="header__input-hide">
                <label for="search" class="header__search"></label>
                <input class="header__search__input" type="search" placeholder="Busque por algo">

Tudo o que eu faço para tentar resolver isso está dando errado.

Minha proxima solução vai ser colocar o código html ao contrário e fazer um .header__container {display: flex; + flex-direction: row-reverse} para ver se resolve.