попробуйте это
* {
margin: 0;
padding: 0;
}
.logo {
width: 10%;
display:inline-block;
}
body {
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display:inline-block;
}
nav ul li a {
text-decoration: none;
float: left;
text-align: center;
font-family: 'Gloria Hallelujah', cursive;
color: #E6E6E6;
}
nav {
overflow: hidden;
background-color: #214569;
position: fixed;
top: 0;
width: 100%;
}
nav ul li:hover {
background-color: #8C9DBF;
}
/*
nav p {
top: 0;
float: right;
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
}
*/
header {
background-color: #214569;
opacity:0.7;
}
.socialMedia {
width: 10%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 9em;
color: #7D0CE8;
text-shadow: 4px 4px 4px #fff;
opacity: .8;
position: relative;
text-align: center;
top: 30%;
}
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
#thirdBackground {
background: url() no-repeat;
background-size: cover;
height: 1000px;
width: auto;
}
<html>
<head>
<title>Restaurant HAYQ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Aurimas Ransys">
<meta name="keywords" content="Armenian Food, Food">
<meta name="description" content="Armenian Food Business">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
</head>
<body>
<section id="navbackground">
<header>
<nav>
<ul>
<img src="img/hayq.png" alt ="logo" class="logo"/>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Drivers</a></li>
<li><a href="events.html">Bolids</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="contacts.html">Contact us</a></li>
<img src="img/media.png" alt="social media" class="socialMedia">
</ul>
<!-- Just wanted to add social media on nav bar
<p>Follow us on<br> social media</p>
-->
</nav>
</header>
</section>
<section id="firstdBackground">
<h1>HAYQ</h1>
<h2>Armenian Specials</h2>
</section>
<section id="secondBackground">
nothing here
</section>
</body>
</html>