Agora que reparei que vc está usando Bootstrap 4, então vou reformular a resposta.
Seu problema é que vc está usando as classes mt-4
no Logo e mt-2
na div .meio
mt
na verdade significa margin-top
Para ler a documentação sobre o Espaçamento no Bootstrap 4 leia a documentação aqui: http://getbootstrap.com/docs/4.0/utilities/spacing/
Já o problema da margem abaixo do é<h2>
é que por default ele tem margens acima e abaixo. Vc pode ler mais sobre esses valores de "CSS Defaults" dos Browsers nessa resposta: https://pt.stackoverflow.com/questions/165937/o-que-%C3%A9-user-agent-stylesheets* O que é User Agent StyleSheets?* (pesquise sobre user-agent para aprender mais)*
Então basta remover essas classes para resolver seu problema. Veja no exemplo abaixo:
header{
background-color: #ffc107;
}
h2{
margin-bottom: 0 !important;
}
.meio{
background-color: brown;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<header class="container-fluid topo">
<img src="img/selo.png" class="img-fluid mx-auto float-right selo">
<img src="img/logo.png" class="img-fluid mx-auto d-block" alt="Logo DoUp">
<h2 class="text-center text-dark ">Seu curso de espanhol em 12 meses</h2>
</header>
<div class="meio ">gdfgfd</div>