html, body{margin: 0; padding: 0; height: 100%; text-align: center;}
section { min-height: 85%}
a {text-decoration: none;}
li {list-style-type: none;}
h1, h2, h3,a { font-family: "Roboto Slab", sans-serif ; font-weight: 500; color: #494949;text-transform: uppercase;}
h1, h2 {color: white;
text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;}
h3 {font-size: 40px; padding-top: 0%;margin-bottom: 5px;}
h4, p {font-family: "Roboto Slab", serif; color:#494949;}
/* h1 padding as solution for the "jump to home" problem :h1 {padding-top: 2.5%} *******/
hr {width: 100px;height: 3px;background: #494949;border: 0;margin: 0 auto 40px auto;}
#logo,li,img,.button {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms}
/* HEADER ********************************/
header { width: 100%; height: 65px; position: fixed; top:0; left: 0; background: #FEFCFB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) ; z-index: 1; }
#logo {
width: 140px;
float: left;
margin: 10px 0 0 -10px
}
#logo img{
width: 56%;
}
#logo:hover {
opacity: 0.5;
}
header nav {
float:right;
margin:6px 50px 0 0;
}
header nav ul li {
float:left;
margin-left: 25px;
}
header nav ul li a {
font-size: 16px
}
header nav ul li:hover {
padding-top: 5px;
}
/* Header
#headerino {
min-height: 10%
}
********************************/
/* Home ********************************/
#home{
background: url(../img/landing.jpg);
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
#home h1 {
margin: 0;
padding-top:60px;
font-size: 110px}
#home h2 {
margin: 0 auto 0 auto;
font-size: 25px;
}
#home img {
width: 32px;
margin-top: 150px;
opacity: 0.7;
}
#home img:hover {
opacity: 1;
}
#home {min-height: 100%}
/* About ********************************/
#about img {
width: 240px;
}
#about h4{
font-size: 15px;
}
#about p{
width: 70%;
margin:0 auto 0 auto;
}
#about img:hover {
transform: scale(1.1);
}
/* Kurzwarenmobil ********************************/
#DasKurzwarenmobil img {
width: 400px;
border-radius: 3px;
}
#DasKurzwarenmobil {
background-color: #D3D3D3;
opacity: 1;
}
#DasKurzwarenmobil p{
width: 70%;
margin:0 auto 0 auto;
}
#DasKurzwarenmobil img:hover {
transform: scale(1.1);
}
/* Ich bringe den Großhandel zu ihnen ********************************/
#Großhandel img {
width: 400px;
border-radius: 3px;}
#Großhandel img:hover {
transform: scale(1.1);
}
#Großhandel p{
width: 70%;
margin:0 auto 0 auto;
}
/* Service ********************************/
#service img {
width: 400px;
border-radius: 3px;
}
#service {
background-color: #D3D3D3;
opacity: 1;
}
#service img:hover {
transform: scale(1.1);}
#service p{
width: 70%;
margin:0 auto 0 auto;
}
/* Contact ********************************/
form input, textarea {
font-family: "Roboto Slab", serif;
font-size: 15px;
margin-bottom: 10px;
border-radius: 10px;
border: 2px solid;
border-color: #494949;
outline: none;
}
form input {
width: 552px;
height: 30px
}
form textarea {
width: 552px;
height: 200px;
resize: none;
border-color: #494949;
}
.input_text {
color:#494949 ;
padding-left: 10px;
}
.button {
width: 566px;
height: 50px;
background-color: #f0f0f0;
color: #494949;
}
.button:hover {
background-color: #494949;
color: #f0f0f0;
}
/* Footer ********************************/
footer {
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
footer p {
font-size: 12px;
color: #f0f0f0;
padding-top:30px;
}
/* Media Queries ********************************/
/* Tablets ********************************/
@media screen and (max-width:1024px){
#logo {
width: 100px;
margin-top: 5px;
}
header nav {
margin-top: 10px;
}
header nav ul li {
font-size: 12px;
}
#home h1 {
font-size: 65px;
}
#home h2 {
font-size: 22px;
}
h3 {padding-top: 12%
}
}
/* Mobile********************************/
@media screen and (max-width:480px) {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>H.S. Schneiderbedarf | Kurzwarenmobil</title>
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
</head>
<!-- Header -->
<header>
<div id="logo">
<img src="img/111.jpg"="Kurzwarenmobil">
</div>
<nav>
<ul>
<a href="#home"><li>home</li></a>
<a href="#about"><li>Über mich</li></a>
<a href="#DasKurzwarenmobil"><li>Das Kurzwarenmobil</li></a>
<a href="#Kontakt"><li>Kontakt</li></a>
</ul>
</nav>
</header>
<!-- Home -->
<section id="home">
<h1>Kurzwarenmobil</h1>
<h2>H.S. Schneiderbedarf</h2>
<a href="#about">
<img src="img/pfeil.png" alt="arrow">
</a>
</section>
<!-- Über mich -->
<section id="about">
<h3>Über mich</h3>
<hr>
<img src="img/avatar.png" alt="Hüllis face">
<h4>H.S Schneiderbedarf<h4>
<p>
Ich Bin Hülya S. und habe mittlerweile mehr als ein Jahrzent Erfahrung im Schneider- sowie Kurzwarengeschäft angesammelt.
Meine Leidenschaft und Faszinierung der Branche gegenüber brachten mich
nach jahrelangem arbeiten als Näherin in verschiedenen Unternehmen dazu, mich in dieser Branche selbstständig zu machen
Nachdem die Entscheidung der Selbstständigkeit gefällt war, fing die Arbeit erst richtig an. Nach langem Konzeptionieren, Umsetzen, Verfeinern, Scheitern und wieder aufstehen war letzendlich die Idee des "Kurzwarenmobils" geboren.
<br>
Mittlerweile erstreckt sich mein Kundenstamm weit über die Grenzen Hannovers, den Heimatort des Kurzwarenmobils aus. Mittlerweile beläuft sich das Geschäft auf viele große sowie kleine Städte Norddeutschlands, und die Kapazitätsgrenze ist noch lange nicht erreicht.
</p>
</section>
<!-- Kurzwarenmobil -->
<section id="DasKurzwarenmobil">
<br>
<h3>Das Kurzwarenmobil</h3>
<hr>
<img src="img/333.jpg" alt="INSERT IMG Hülli WAGEN+ Sie">
<h4>Was Ist das Kurzwarenmobil?</h4>
<p>
Das Kurzwarenmobil ist mein Transporter, mit dem ich täglich verschiedene Städte Deutschlands besuche und meinen über 300 Kunden, die
benötigten Utensilien und Stoffe direkt zu ihren Läden liefere.
</p>
<br>
<br>
</section>
<br>
<!-- großhandel--->
<section id="Großhandel">
<h4>Ich bringe den Großhandel zu ihnen</h4>
<img src="img/4444.jpg" alt="Großhandel">
<br>
<br>
<p>
Da das Hauptgeschäft des Kurzwarenmobils auf die Mobilität und große Auswahl ausgelegt ist und ich die Waren direkt vom Großhandel beziehe,
bin ich in der Lage die beste Ware zum günstigen Preis anzubieten. wodurch sie selbstverständlich bares Geld sparen können!
<br>
Umfangreiches Angebot und stets die aktuellsten Waren der Kurzwarenwelt, Ob Knöpfe und
Reißverschlüsse für individuelle Modeschöpfungen, Handarbeitsgarne oder modische
Bänder und Kordeln für kreative Deko-Ideen: Das Kurzwarenmobil führt stehts eine Große Auswahl an hochwertigen
Arbeitsmaterialien und das ohne Einschränkung und in voller Ausführung direkt vor ihrer Tür!
Durch regelmäßige Besuche und kostenloser Anfahrt können sie dadurch Einsparungen in ihren Lagerhaltungs- bzw Lieferungskosten einsparen.
</p>
</section>
<!-- individueller service-->
<section id="service">
<br>
<h4>Individueller Service</h4>
<img src="img/222.jpg" alt="Sortiment innen">
<br>
<br>
<p>
Durch die Natur meiner Arbeit haben sie nicht nur den Vorteil, dass ich ihnen alle benötigten Utensilien bis vor die Türe bringe, sondern auch das Privileg sich am gesamten Katalog des Kurzwarenmobils vor Ort inspirieren und individuell beraten zu lassen. Fehlerhafte Bestellung gehören damit der vergangenheit an!
</p>
<br>
</section>
<!-- Contact -->
<section id="Kontakt">
<h3>Kontakt</h3>
<hr>
<form>
<input class="input_text" type="email" tabindex="1" Placeholder="E-mail" ><br><br>
<input class="input_text" type="text" tabindex="2" Placeholder="Betreff" ><br><br>
<textarea class="input_text" tabindex="3" Placeholder="Nachricht" ></textarea> <br><br>
<input class="button" type="submit">
</form>
</section>
<!-- Footer -->
<footer>
<p>
© 2018-2019 B.Ertürk, All rights reserved
</p>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous">
</script>
<script
src="js/mobile-menu.js" type="text/javascript">
</script>
</body>
</html>
вот оно!решаем, убрав маржу на вашем доме h1 и добавив отступы!Вы должны всегда использовать удаление отступов и полей для всех элементов, потому что по умолчанию они получили некоторые значения полей и отступов!