Writing two paragraphs, these are spaced apart! IDK why - html

Question

Writing two paragraphs, these are spaced apart. My paragraphs are very far and I don't understand why.
I tried to unlink css files, between the two paragraphs there was an empty line: missing in the code.
My page:
<div class="sharp">
<p class="title">Chi sono?</p><p class="content">Seguimi su Twitter!</p>
</div>
All my CSS:
*{
margin: 0;
height: 100%;
}
.title{
color: #2d3436;
text-align: center;
text-shadow: 3px 2px #b2bec3;
font-size: 50px;
font-weight: bold;
}
.content{
color: #2d3436;
text-align: center;
text-shadow: 2px 1px #b2bec3;
font-size: 25px;
font-weight: lighter;
}
hr {
width: 95%;
height: 2px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 20px;
margin-bottom:20px;
}
.space{
height: 100px;
}
.dark{
margin: auto;
padding: 20px;
background: #000;
color: #fff;
width: 85%;
height: 80px;
}
.sharp{
margin: auto;
padding: 20px;
background: #fff;
border-radius: 25px;
border: 1px solid #dfe4ea;
width: 85%;
box-shadow: 5px 10px 8px #888888;
}
body{
width: 100%;
background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
background-repeat: no-repeat;
background-size: 4000px 4000px;
}
.img-container{
background-image: url(../data/images/hero.png);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index:1;
}
.inner-container{
text-align: center;
width: 100%;
color: #fff;
position: absolute;
height: auto;
margin-top: 200px;
}
h1{
font-size: 7em;
font-family: "Shadows into Light", Sans Serif;
}
h2{
margin-top: -17px;
font-family: "Source Sans Pro", Sans Serif;
font-size: 1.7em;
text-align: center;
font-weight:400;
}
a{
margin-top: 20px;
font-size: 1.3em;
font-family: "Source Sans Pro", Sans Serif;
}
.btn{
display: inline-block;
width: 200px;
font-weight: bold;
padding: 10px;
color: #fff;
border: 4px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover,.btn:active{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
#media only screen and (max-width: 920px){
.inner-container{
margin-top: 100 px;
}
}
#media only screen and (max-width: 540px){
.inner-container{
margin-top: 150px;
}
h1{
font-size: 5em;
}
h2{
font-size: 1.4em;
}
The two paragraphs are too far apart. I hope someone can help me...[How the page looks.][1]

Answer 1

By writing *{height: 100%} in your css, you are telling it to make every element (aka *) take up 100% of the available height. In doing so, your first paragraph is taking up all the height it can, pushing the second one all the way down.
If the only element you want to ensure has a 100% height is the white background, consider styling it individually.

Answer 2

The
*{
height: 100%;
}
part of your CSS file is telling every element on the page to be the same height as the window, so the second element is pushed down. If you remove that line from the CSS file the problem will go away.

Answer 3

Problem solved by giving
height: 10%;
to the paragraphs.