Solucionado
Não entendi o motivo de utilizar o "column-gap" para alinhar a logo e a barra de pesquisa com as margens da página, já que me parece mais lógico aplicar um "justify-content: space between", pois não é preciso ficar calculando e testando o número de px (nem a parte do flex-wrap). Tentei das duas formas e cheguei ao mesmo resultado.
Usando justify-content:
Usando o column-gap e o flex-wrap:
Olá, Isabela.
Tudo bem?
Dos dois jeitos são válidos! O legal de desenvolver é isso, várias formas diferentes de chegar no mesmo resultado. Eu prefiro utilizar o "justify-content" e o "align-items", eu utilizo bastante. Na verdade eu prefiro usar mais o display: flex; do que o display: grid; mas ambos são ótimos e nos ajudam bastante na hora de posicionar os elementos, é mais por gosto mesmo no meu caso.
Espero ter ajudado de alguma forma. Valeu Isabela.