How do I make VSCode read my Navigation code? - html

Question

I am currently working on my navigation bar on VScode. I want it to be on the right top corner(where I am going to place my logo) and aligned side by side. but my code does not seem to be working.
here is my codepen link:
https://codepen.io/Zeynepbozdayi/pen/eYgOmPo
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#header {
position: fixed;
background-color: white;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
/*z-index: 2;*/
}
.nav {
float: right;
font-family: 'Lexend Mega', sans-serif;
text-transform: uppercase;
}
.nav ul {
padding: 0;
margin: 0;
}
.nav ul li {
float: left;
list-style-type: none;
border: 1px solid #eee;
}
.nav ul li a {
background-color: black;
color: white;
padding: 10px;
display: block;
text-decoration: none;
}
.nav ul li a:hover {
background-color: white;
color: black;
}
#branding {
width: 200px;
height: 50px;
float: left;
background: url('http://lorempixel.com/output/business-q-g-301-63-4.jpg') no-repeat center center;
background-size: 200px;
}
#minimenu {
display: none;
}
.section:nth-child(even) {
background-color: #dddddd;
}
.section {
min-height: 1000px;
padding-top: 100px;
overflow: hidden;
/*position: relative;*/
font-family: 'Lexend Mega', sans-serif;
color: red;
section article {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
}
#about {
background: url('http://lorempixel.com/output/city-q-c-1460-1010-5.jpg') no-repeat;
background-size: cover;
}
#products {
background: url('http://lorempixel.com/output/business-q-c-1460-1010-8.jpg') no-repeat;
background-size: cover;
}
<header id="header">
<div id="menu">
<div id="branding"><img src="http://lorempixel.com/output/business-q-g-301-63-4.jpg"></div>
<div id="minimenu"><i class="fa fa-bars"></i></div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Redesign</li>
<li>From You</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<!-- This is the Home section -->
<section id="home" class="section">
<header>
<h1>CREATIVE</h1>
<h1>CLOTHING</h1>
<h1>DESIGN</h1>
<h1>with Zebo’s</h1>
</header>
<article>
<p>Reuse, reduce, recycle- it generates less overall waste,
it’s free, and your favorite pieces of clothes will last longer. In a few easy steps
you can redesign your own clothes in fashionable ways.
<strong><p>Here is how:</p> </strong>
</article>
</section>
<!-- This is the About section -->
<section id="about" class="section">
<header>
<h2>ABOUT</h2></header>
<article>
<p>
It is very important to recycle our unused or overused clothes. Because textile and fashion industries
are not as innocent as they seem to be. The fashion indusrty is the second biggest polluter
in the world after the oil industry. Process of cloth making includes high rates of water pollution,
water consumption, microfibers in the ocean, waste accumulations, greenhouse gas emission and many
more impacts to the world.</p>
<p>
Our mission is to show people how to bring their old clothes or shoes back to life in a fashionable
way and embrace them to be considered when buying or giving away their clothes.
</p>
</article>
</section>
<!-- This is the Product section -->
<section id="Redesign" class="section">
<header>
<h2>LET’S REDESIGN A PAIR OF SHOES</h2></header>
<article>
<p>This section will show you a tutorial for how to redesign your high top Converse shoes.</p>
<p>Lets start:</p>
<h3>STEP#1: FIND A HIGH TOP CONVERSE TO REPAIR</h3>
</article>
</section>
<!-- This is the Contact section -->
<section id="From You" class="section">
<header>
<h2>From You</h2>
</header>
</section>
</div>

Answer 1

Your CSS has .nav (which selects <anything class="nav"> but your HTML has <nav id="nav">.
You need to change your CSS to use #nav.
or nav (if you will only ever have a single <nav> element on your page.
or nav#nav (if you want to be redundant).
My solution is posted below. I've also made the following changes:
Making your selectors more consistent (indentation, using the child-selector > instead of the descendant selector where appropriate).
Use a single <h1>, with <br /> for line-breaks instead of separate <h1> elements.
Removing all float: rules and instead use display: flex; for only nav > ul.
Use position: sticky instead of position: absolute for #header.
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#header {
position: -webkit-sticky;
position: sticky;
background-color: white;
box-sizing: border-box;
height: 80px;
top: 0;
right: 0;
z-index: 2;
}
#nav {
font-family: 'Lexend Mega', sans-serif;
text-transform: uppercase;
}
#nav ul {
padding: 0;
margin: 0;
display: flex;
}
#nav ul > li {
list-style-type: none;
border: 1px solid #eee;
}
#nav ul > li > a {
background-color: black;
color: white;
padding: 10px;
display: block;
text-decoration: none;
}
#nav ul li a:hover {
background-color: white;
color: black;
}
#branding {
width: 200px;
height: 50px;
float: left;
background: url('http://lorempixel.com/output/business-q-g-301-63-4.jpg') no-repeat center center;
background-size: 200px;
}
#minimenu {
display: none;
}
.section:nth-child(even) {
background-color: #dddddd;
}
.section {
min-height: 1000px;
padding-top: 100px;
overflow: hidden;
font-family: 'Lexend Mega', sans-serif;
color: red;
.section article {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
}
#about {
background: url('http://lorempixel.com/output/city-q-c-1460-1010-5.jpg') no-repeat;
background-size: cover;
}
#products {
background: url('http://lorempixel.com/output/business-q-c-1460-1010-8.jpg') no-repeat;
background-size: cover;
}
<header id="header">
<div id="menu">
<div id="branding"><img src="http://lorempixel.com/output/business-q-g-301-63-4.jpg"></div>
<div id="minimenu"><i class="fa fa-bars"></i></div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Redesign</li>
<li>From You</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<!-- This is the Home section -->
<section id="home" class="section">
<header>
<h1>
CREATIVE<br />
CLOTHING<br />
DESIGN<br />
with Zebo’s
</h1>
</header>
<article>
<p>Reuse, reduce, recycle- it generates less overall waste,
it’s free, and your favorite pieces of clothes will last longer. In a few easy steps
you can redesign your own clothes in fashionable ways.
<strong><p>Here is how:</p> </strong>
</article>
</section>
<!-- This is the About section -->
<section id="about" class="section">
<header>
<h2>ABOUT</h2>
</header>
<article>
<p>
It is very important to recycle our unused or overused clothes. Because textile and fashion industries
are not as innocent as they seem to be. The fashion indusrty is the second biggest polluter
in the world after the oil industry. Process of cloth making includes high rates of water pollution,
water consumption, microfibers in the ocean, waste accumulations, greenhouse gas emission and many
more impacts to the world.</p>
<p>
Our mission is to show people how to bring their old clothes or shoes back to life in a fashionable
way and embrace them to be considered when buying or giving away their clothes.
</p>
</article>
</section>
<!-- This is the Product section -->
<section id="Redesign" class="section">
<header>
<h2>LET’S REDESIGN A PAIR OF SHOES</h2></header>
<article>
<p>This section will show you a tutorial for how to redesign your high top Converse shoes.</p>
<p>Lets start:</p>
<h3>STEP#1: FIND A HIGH TOP CONVERSE TO REPAIR</h3>
</article>
</section>
<!-- This is the Contact section -->
<section id="From You" class="section">
<header>
<h2>From You</h2>
</header>
</section>
</div>