text stuckt to the header? [duplicate] - html

Question

This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I’m trying to move my text to the middle of my header on the image but as soon as I move it the whole header follows. Could someone try to help me solve this issue? As you see I’m trying to make it using margin-top but when I implement this the header follows. I have closed all the divs that affects the image.
html, body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 400px;
background: url(/assets/image/tjanst.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 10;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
padding: 16px 40px;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.move-down h3{
margin-top: 200px;
max-width: 400px;
}
nav ul li a {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 20px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo wow tada">
</div>
<div class="menu">
<ul>
<li>START</li>
<li>TJÄNSTER</li>
<li>OM OSS</li>
<li>KONTAKT</li>
</ul>
</div>
</nav>
<div class="move-down wow fadeInUp"><h3> VILL GÖRA KUNDEN NÖJD</h3>
<h3> tel: [phone] </h3></div>
</header>
how it looks now
https://i.stack.imgur.com/vOQGa.png

Answer 1

Well remove 'margin-top: 200px;' in the '.move-down h3' and add 'padding: 200px 0px 0px 0px;' or 'padding-top: 200px;'

Answer 2

Yes, Simple solution is.
Add this CSS
h3{
maring:0;
}
Hope this helps.

Answer 3

Instead of adding margin-top add top value to relatively positioned element.
.move-down h3 {
max-width: 400px;
position: relative;
top: 205px;
}
https://jsfiddle.net/6uedrb89/12/