Skip to main content
correção de informação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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>

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 é que por default ele tem margens acima e abaixo. Vc pode ler mais sobre esses "CSS Defaults" dos Browsers nessa resposta: https://pt.stackoverflow.com/questions/165937/o-que-%C3%A9-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>

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: 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>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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 é que por default ele tem margens acima e abaixo. Vc pode ler mais sobre esses "CSS Defaults" dos Browsers nessa resposta: https://pt.stackoverflow.com/questions/165937/o-que-%C3%A9-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>