How do I make text have no space in between them vertically?

I want to make these 2 text boxes have no space in between them

The way the website looks

I tried using a container with the code display:flex; in it but that made the text uncentered.

body {
  background-color: lightblue;
}

h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
}
<h1 style="text-align:center">The Mains Are</h1>
<h2>BACK!</h2>

>Solution :

You can achieve this by giving the h2 element a margin:0. If you want to close the gap a little more, you can get it as close as you want by giving a negative margin-top value.

body {
  background-color: lightblue;
}

h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
  margin:0;
  margin-top:-72px; /*you can change the gap by changing this value*/
}
<h1 style="text-align:center">The Mains Are</h1>
<h2>BACK!</h2>

Leave a Reply