Why doesn't my dropdown menu work propely when using parallax? - html

so I'm working on a new parallax webpage for a school project. Now when I hover over my dropdown nav menu, the menu get's really dark and unreadable. And also I can't hover over my dropdown menu anymore because it disappears. I changed the z-index to a higher value but that doens't seem to work. Does anyone know how I could fix this?
[
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0,0,0, .8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li a:hover {
background-color: skyblue;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: black;
z-index: 99;
position: relative;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
.pimg1{
background-image:url(WallFon.com_11296.jpg);
min-height: 400px;
}
.pimg2{
background-image:url(isp.jpg);
min-height: 400px;
}
.pimg3{
background-image:url(30714.jpg);
min-height: 400px;
}
.section-dark{
text-align:center;
padding:35px 80px;
}
.section-light{
text-align:center;
padding:35px 80px;
}
.section-light{
background-color:#282e34;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align: center;
color: lightgray;
font-size:27px;
letter-spacing:6px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:white;
padding:20px;
}
.ptext .border .trans{
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>
][1]
Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png


I played a bit with your css. Basically
I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.
Added a dark background to your nav ul li.
Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.
Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.
I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.
body,
html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1, 8em;
color: #666;
height: 100%;
margin: 0;
}
nav {
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor: pointer;
}
nav ul li ul {
display: none;
}
nav ul li:hover > ul,
nav ul li ul:hover {
display: block;
z-index: 99;
position: relative;
}
.pimg1,
.pimg2,
.pimg3 {
position: relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url(WallFon.com_11296.jpg);
min-height: 400px;
z-index: -1;
}
.pimg2 {
background-image: url(isp.jpg);
min-height: 400px;
}
.pimg3 {
background-image: url(30714jpg);
min-height: 400px;
}
.section-dark {
text-align: center;
padding: 35px 80px;
}
.section-light {
text-align: center;
padding: 35px 80px;
}
.section-light {
background-color: #282e34;
color: #ddd;
}
.section-dark {
background-color: #282e34;
color: #ddd;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: lightgray;
font-size: 27px;
letter-spacing: 6px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
.ptext .border .trans {
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>

Related

Is there anyone can say why my CSS h1 is not working?

At first take my respect in Advance. I cant understand why my H1 is not working. Even the Dropdown is not working properly after hover. If Check you will have it. :(
* {
margin: 0;
padding: 0;
}
.navbar {
position: fixed;
width: 100%;
}
.main--nav {
display: flex;
background-color: #000000;
}
.navbar ul li {
list-style: none;
padding: 20px 0;
}
a {
text-decoration: none;
color: white;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 0 20px;
}
.navbar ul li:hover {
background-color: aqua;
}
.drop--nav {
position: relative;
background-color: black;
}
.drop--nav .dropdown {
position: absolute;
display: block;
visibility: hidden;
background-color: black;
margin-top: 20px;
min-width: 150px;
}
.drop--nav:hover .dropdown {
visibility: visible;
}
.main--para {
position: relative;
}
.main--para p {
position: absolute;
margin-top: 180px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position war</title>
<link rel="stylesheet" href="/asset/css/style.css">
</head>
<body>
<nav class="navbar">
<ul class="main--nav">
<li>Home</li>
<li>Blog</li>
<li class="drop--nav">Servic
<div class="dropdown">
<ul>
<li>Article</li>
<li>Video</li>
<li>Image</li>
</ul>
</div>
</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</nav>
<div class="main--para">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, dicta vitae? Officia repudiandae aspernatur, quo autem nisi iusto reprehenderit odio corrupti! Adipisci, sapiente iste. Quasi liquam sapiente, eaque laudantium odit et! Quas similique perspiciatis,
culpa vero placeat, error nisi officiis incidunt iure, aspernatur eveniet est nostrum excepturi.
</p>
</div>
<div class="first--h1">
<h1>i love bangladesh</h1>
</div>
</body>
</html>
I tried a lot.. Even i am not sure with the position property that it can occur problem or not. Can you please help me?

The navigation menu is covering the H1.
*{
margin:0;
padding:0;
}
.navbar{
position:fixed;
width: 100%;
}
.main--nav{
display:flex;
background-color:#000000;
}
.navbar ul li{
list-style:none;
padding:20px 0;
}
a{
text-decoration: none;
color:white;
font-size: 20px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
padding:0 20px;
}
.navbar ul li:hover{
background-color:aqua;
}
.drop--nav{
position:relative;
background-color:black;
}
.drop--nav .dropdown{
position:absolute;
display: block;
visibility: hidden;
background-color:black;
margin-top: 20px;
min-width: 150px;
}
.drop--nav:hover .dropdown{
visibility: visible;
}
.content {
position: absolute;
top: 80px;
}
<nav class="navbar">
<ul class="main--nav">
<li>Home</li>
<li>Blog</li>
<li class="drop--nav">Servic
<div class="dropdown">
<ul>
<li>Article</li>
<li>Video</li>
<li>Image</li>
</ul>
</div>
</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<div class="main--para">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, dicta vitae? Officia repudiandae aspernatur, quo autem nisi iusto reprehenderit odio corrupti! Adipisci, sapiente iste. Quasi liquam sapiente, eaque laudantium odit et! Quas similique perspiciatis, culpa vero placeat, error nisi officiis incidunt iure, aspernatur eveniet est nostrum excepturi.
</p>
</div>
<div class="first--h1">
<h1>i love bangladesh</h1>
</div>
</div>

Since your navbar has a fixed position, the h1 is underneath that element.
Consider adding a extra content div, that will contain both the h1 and the text. Position this diff below the navbar to get the desired output:
*{
margin:0;
padding:0;
}
.navbar{
position:fixed;
width: 100%;
}
.main--nav{
display:flex;
background-color:#000000;
}
.navbar ul li{
list-style:none;
padding:20px 0;
}
a{
text-decoration: none;
color:white;
font-size: 20px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
padding:0 20px;
}
.navbar ul li:hover{
background-color:aqua;
}
.drop--nav{
position:relative;
background-color:black;
}
.drop--nav .dropdown{
position:absolute;
display: block;
visibility: hidden;
background-color:black;
margin-top: 20px;
min-width: 150px;
}
.drop--nav:hover .dropdown{
visibility: visible;
}
.content {
position: absolute;
top: 80px;
}
<nav class="navbar">
<ul class="main--nav">
<li>Home</li>
<li>Blog</li>
<li class="drop--nav">Servic
<div class="dropdown">
<ul>
<li>Article</li>
<li>Video</li>
<li>Image</li>
</ul>
</div>
</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<div class="main--para">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, dicta vitae? Officia repudiandae aspernatur, quo autem nisi iusto reprehenderit odio corrupti! Adipisci, sapiente iste. Quasi liquam sapiente, eaque laudantium odit et! Quas similique perspiciatis, culpa vero placeat, error nisi officiis incidunt iure, aspernatur eveniet est nostrum excepturi.
</p>
</div>
<div class="first--h1">
<h1>i love bangladesh</h1>
</div>
</div>

How to make site responsive?

I am having trouble making the footer, row section, and h1 in the header responsive for my site. The footer and row section have three column layouts, with the section having boxes. When I resize the page, the text goes all over the place and the h1 disappears. The three boxes stack on top of each other and I want them to be under each other when the page gets resized. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ComPack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="styles/normalize.css" />
<link rel="stylesheet" href="styles/challenge.css" />
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="images/06926FRH.jpg" alt="">
<h1 class="com">ComPack</h1>
</header>
<nav>
Home
Solutions
Services
Locations
Support
</nav>
<section class="row">
<article id="results">
<h2>Results</h2>
<p>Unde quae quidem earum, at, ullam officiis minus! Facilis incidunt impedit cum unde quae, neque debitis reiciendis perspiciatis asperiores dolor totam culpa, soluta sapiente veritatis. Accusantium illum quisquam, repellendus temporibus!</p>
</article>
<article id="partners">
<h2>Partners</h2>
<p>Adipisci soluta, voluptas perferendis illo, quas culpa doloribus? Nulla quibusdam, eveniet consectetur enim voluptatibus nam quos minus, aliquam voluptatum quis. Velit nesciunt quam, quidem praesentium laudantium nostrum nobis iusto animi.</p>
</article>
<article id="future">
<h2>Future</h2>
<p>Nam recusandae nihil harum animi excepturi nulla qui laborum sed illo repudiandae numquam quibusdam eaque, eius culpa unde pariatur suscipit inventore quos iure saepe at dolor fuga ea. Aperiam, ex.</p>
</article>
</section>
<footer class="row2">
<div id="copyright">
<p><small>Copyright © 2017 ComPack, Inc.</small></p>
</div>
<div id="contactUs">
<h3>Contact Us</h3>
<ul>
<li>Customer Service</li>
<li>Sales</li>
<li>Technical Support</li>
</ul>
</div>
<div id="resources">
<h3>Resources</h3>
<ul>
<li>Cumque amet aspernatur</li>
<li>Aut perspiciatis consequuntur</li>
<li>Accusantium nihil illum</li>
</ul>
</div>
</footer>
</body>
</html>
.com {
top: -34rem;
position: relative;
font-size: 4vw;
padding-left: 2.5rem;
font-family: 'Amiri', serif;
}
nav {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
flex: auto;
}
nav a {
float: left;
display: block;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 17px;
color: beige;
}
nav a:hover {
color: lightcoral;
}
footer {
background-color: #222;
color: beige;
}
footer a {
color: beige;
}
header {
color: #36a;
}
img {
width: 100%;
margin-top: 3rem;
}
#contactUs a:hover {
color: lightcoral;
}
#resources a:hover {
color: lightcoral;
}
#results {
float: left;
width: 27%;
padding: 0rem 1.1rem .2rem 1.5rem;
border-radius: 1px 1px 1px 1px;
margin-left: 9rem;
margin-top: -8rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
#partners {
float: left;
width: 27%;
padding: 0rem 1.1rem .2rem 1.5rem;
margin-left: 3.5rem;
margin-top: -8rem;
margin-bottom: 2rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
#future {
float: left;
width: 27%;
margin-top: -8rem;
margin-left: 3rem;
padding: 0rem 1.1rem .2rem 1.5rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
.row:after {
content: "";
display: flex;
clear: both;
}
#copyright {
float: left;
padding-left: 3rem;
margin-top: 5.3rem;
}
#resources {
float: left;
padding-left: 20.5rem;
margin-top: -8rem;
}
#contactUs {
float: left;
padding-left: 45rem;
margin-top: .2rem;
}
.row2:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
#copyright {
width: 100%;
}
#contactUs {
width: 100%;
}
#resources {
width: 100%;
}
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
Help is appreciated.

Your articles need to be in a flex container for them to be put in a layout correctly. Take a look at this, I removed the row class (You can keep it) and changed it to container, which I only gave this property display: flex;
https://jsfiddle.net/4kzpjhe6/ You can see it here, it isn't fully corrected but is a better place to start.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ComPack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="styles/normalize.css" />
<link rel="stylesheet" href="styles/challenge.css" />
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="images/06926FRH.jpg" alt="">
<h1 class="com">ComPack</h1>
</header>
<nav>
Home
Solutions
Services
Locations
Support
</nav>
<section class="container">
<article id="results">
<h2>Results</h2>
<p>Unde quae quidem earum, at, ullam officiis minus! Facilis incidunt impedit cum unde quae, neque debitis reiciendis perspiciatis asperiores dolor totam culpa, soluta sapiente veritatis. Accusantium illum quisquam, repellendus temporibus!</p>
</article>
<article id="partners">
<h2>Partners</h2>
<p>Adipisci soluta, voluptas perferendis illo, quas culpa doloribus? Nulla quibusdam, eveniet consectetur enim voluptatibus nam quos minus, aliquam voluptatum quis. Velit nesciunt quam, quidem praesentium laudantium nostrum nobis iusto animi.</p>
</article>
<article id="future">
<h2>Future</h2>
<p>Nam recusandae nihil harum animi excepturi nulla qui laborum sed illo repudiandae numquam quibusdam eaque, eius culpa unde pariatur suscipit inventore quos iure saepe at dolor fuga ea. Aperiam, ex.</p>
</article>
</section>
<footer class="row2">
<div id="copyright">
<p><small>Copyright © 2017 ComPack, Inc.</small></p>
</div>
<div id="contactUs">
<h3>Contact Us</h3>
<ul>
<li>Customer Service</li>
<li>Sales</li>
<li>Technical Support</li>
</ul>
</div>
<div id="resources">
<h3>Resources</h3>
<ul>
<li>Cumque amet aspernatur</li>
<li>Aut perspiciatis consequuntur</li>
<li>Accusantium nihil illum</li>
</ul>
</div>
</footer>
</body>
</html>

flex wrap html and css

i try to put a articles box content like a blog in my website so... i try to make it up a good website responsive, but the wrap css is not working, everthing is on a column or everythin is on a row, but i want to wrap the boxes like, 1, 2, 3, 4, 5, when the screen size change bigger or smoller...
i am already bad for this, i have some hours tryin to figure it out but i dont get it.
thank you so much.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: lightslategrey;
color: white;
font-size: 16px;
}
a {
color: white;
text-decoration: none;
}
Nav {
font-family: 'Raleway', sans-serif;
}
ul {
list-style: none;
}
.container {
width: 90%;
margin: auto;
}
/* Navigation */
.nav-main {
font-size: 17px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
}
.logo-nav {
font-size: 20px;
}
/* Nav left */
.nav-main ul {
display: flex;
}
.nav-main ul li {
padding: 10px;
}
.nav-main ul li a {
padding: 4px;
}
.nav-main ul li a:hover {
border-bottom: 2px solid #ffffff;
}
.nav-main ul.nav-menu {
flex: 1px;
margin-left: 95px;
}
/*SHOWCASE*/
hr {
margin-bottom: 10px;
}
.showcase {
font-family: 'Raleway', sans-serif;
width: 100%;
height: 400px;
background: url(./img/fondoshowcase.jpeg) no-repeat center center/cover;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.text-showcase {
align-items: center;
width: 90%;
}
.showcase h2,
.showcase p {
margin-bottom: 15px;
}
.btnshowcase {
cursor: pointer;
display: inline-block;
border: 0px;
font-weight: bold;
padding: 10px 20px;
background: darkorange;
}
.btnshowcase:hover {
opacity: .9;
}
/* News Cards*/
.midcontainer {
background-color: white;
}
#media screen and (min-width: 650px) {
.news-container,
.news-cards {
display: grid;
}
}
#media screen and (max-width: 900px) {
.news-container {
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.news-sep{
margin-bottom: 25px;
}
.news-container {
text-align: center;
}
.news-cards {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.news-cards img {
width: 85%;
height: 30%;
min-height: 180px;
max-width: 85%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcos Canela</title>
<!--font awesome-->
<script src="https://kit.fontawesome.com/335ba1c44e.js" crossorigin="anonymous"></script>
<!--CUSTOM CSS-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="head">
<nav class="nav-main">
<h1 class="logo-nav"> Marcos Canela </h1>
<ul class="nav-menu">
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
</ul>
<ul class="nav-menu-right">
<li>
<a href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<hr></hr>
<!-- showcase-->
<header class="showcase">
<div class="text-showcase">
<h2>Big new today</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sed, nihil ipsum quibusdam eum inventore veniam odit itaque fugit quod quidem placeat delectus quis doloremque ullam facere magni id quia?</p>
Click Aqui <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</header>
</div>
</div>
<!--News Cards-->
<div class="midcontainer">
<hr class="news-sep"></hr>
<div class="news-container">
<div class="news-cards">
<div class="news1">
<img src="/Pruebas/Sitio 2/src/img/news1.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news2">
<img src="/Pruebas/Sitio 2/src/img/news2.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news3">
<img src="/Pruebas/Sitio 2/src/img/news3.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news4">
<img src="/Pruebas/Sitio 2/src/img/news4.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
</html>

Why is my navigation menu not working in parallax website?

I have tried to add navigation-menu into my parallax website, but it does not work and I have tried many other methods but it just does not work so I decided to ask here hoping that someone would help. This is my navigation-menu on a parallax website
Below is my code. Any help would be highly appreciated!!
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('../img/brownie.jpg');
min-height:100%;
}
.pimg2{
background-image:url('../img/image2.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../img/image3.jpg');
min-height:400px;
}
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#f4f4f4;
color:#666;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:#fff;
padding:20px;
}
.ptext .border.trans{
background-color:transparent;
}
#media(max-width:568px){
.pimg1, .pimg2, .pimg3{
background-attachment:scroll;
}
}
a {
/* color: white; */
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
background: none;
}
header .logo {
color: black;
height: 50px;
line-height: 50px;
font-size: 24px;
float: left;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
list-style: none;
position: relative;
}
header nav ul li.sub-menu:before {
content: '\f078';
font-family: fontAwesome;
position: absolute;
line-height: 50px;
color: white;
right: 1px;
}
header nav ul li.active.sub-menu:before {
content: '\f077';
}
header nav ul li ul {
position: absolute;
left: 0;
background: inherit;
display: none
}
header nav ul li.active ul {
/* use li: hover instead */
display: block;
}
header nav ul li ul li {
display: block;
width: 200px;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: black;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
color: #fff;
background: grey;
}
header nav ul li a.active {
background: grey;
}
.menu-toggle {
color: black;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none
}
#media (max-width: 860px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
/* use display none or left:-100% to hide the nav */
/* display: none; */
position: absolute;
top: 50px;
left: -100%;
width: 100%;
height: calc(100vh - 50px);
background: #333;
transition: 0.5s;
}
header nav.active {
left: 0;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul li a {
border-bottom: 0.9px solid rgba(0, 0, 0, .2);
}
header nav ul li.active ul {
position: relative;
background: white;
}
header nav ul li ul li {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parallax Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">LOGO </div>
<nav>
<ul>
<li class="sub-menu">Services
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Team</li>
</ul>
</nav>
<div class="menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
}
)
</script>
<div class="pimg1">
<div class="ptext">
<span class="border">
Cookies
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Image Two Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Image Three Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Traversy Media
</span>
</div>
</div>
</body>
</html>

Add z-index property to header:
header {
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
background: none;
z-index: 1;
}
Your header was behind parallax image, because it has position absolute and your parallax image is all over screen.

Making a 4 section CSS fixed navbar, running into layout issues

I'm trying to make a fixed navbar at the top of my webpage, it's all pure HTML and CSS for now. The problem comes as a result of the fact that I want a button on the left side to open up a sidebar for navigation on mobile. I want to position the three navbar items in the center of the navbar, evenly spaced from eachother. As previously stated, I also want the navbar to be fixed so that it is visible no matter where the user scrolls on the page.
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cyberpunk Bar</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-4KIc2mnKfAA7VjirNLk2Sqp7jxFNq1q8+FhYGxhW2l52lt4HJsfksL+hjswHfbl/" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
</html>
Here's the CSS
body, html
{
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar
{
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu
{
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button
{
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
}
#open-button:hover
{
color: #666;
}
.pimg1, .pimg2, .pimg3, .pimg4
{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1
{
background-image:url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2
{
background-image:url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3
{
background-image:url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4
{
background-image:url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.section-light
{
background-color: #f4f4f4;
color: #666;
}
.section-dark
{
background-color: #282E34;
color: #DDD;
}
.ptext
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border
{
background-color: #111;
color: white;
padding: 20px;
}
Is using a the best practice for this? Please help!

$(".open-slide").click(function() {
$(this).toggleClass("opend");
});
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar {
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter: drop-shadow(0 5px 15px black);
}
#navbar-menu {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button {
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
display:none;
}
#open-button:hover {
color: #666;
}
.pimg1 {
/*margin-top:100px;*/
}
.pimg1,
.pimg2,
.pimg3,
.pimg4 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1 {
background-image: url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2 {
background-image: url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4 {
background-image: url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: #282E34;
color: #DDD;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
/* new css */
.open-slide {
display: none;
}
#navbar-menu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#navbar-menu>li {
height: 100px;
line-height: 100px;
}
.menus-nav.fixed-header {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
#media(max-width:767px) {
.open-slide {
display: block;
}
.open-slide+#navbar-menu {
max-height: 0;
position: relative;
-webkit-transition: max-height 1000ms ease;
transition: max-height 1000ms ease;
overflow: hidden;
}
.open-slide.opend+#navbar-menu {
max-height: 300px;
}
#navbar {
height: auto;
}
#navbar-menu {
display: block !important;
display: block !important;
display: block !important;
display: block !important;
display: block !important;
-webkit-flex-flow: inherit !important;
justify-content: inherit !important;
}
#navbar-menu>li {
height: auto;
}
#navbar-menu>li {
height: auto;
line-height: 1em;
padding: 10px 15px;
text-align: left;
border-bottom: 1px solid #222222;
}
#open-button {
display:block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<body>
<!-- menu -->
<div id="navbar" class="menus-nav fixed-header">
<i id="open-button" class="fab fa-bitcoin open-slide" onclick=""></i>
<ul id="navbar-menu">
<li>Theme</li>
<li>Beer</li>
<li>Menu</li>
</ul>
</div>
<!-- menu -->
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>

First of all our <div id="navbar"> have to be inside <body> tag.
Check here for edited parts of code:
HTML:
<body>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
.....
</body>
</html>
CSS:
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu {
width: max-content;
margin: 0 auto;
}
#navbar-menu li {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0 40px;
color: white;
}
https://codepen.io/Yulia_pi/pen/yjRQgy