Struggling to navigate styling on React - css

Question

I'm extremely new to this stuff, so please don't judge.
I'm trying to build a website and now I'm at the css part of it. My text is showing up in a different color than what I chose, its in the middle and its supposed to be on the left, I added a Menu icon but that's nowhere to be seen and I've added sections in the menu, also nothing.
I feel like crying.
I'm following an instructional and the code is exactly the same, but its showing up different on my side.
import styled from 'styled-components'
import {Link as LinkR} from 'react-router-dom'
import { findByLabelText } from '#testing-library/dom';
import {Link as LinkS} from 'react-scroll'
export const Nav = styled.nav`
background: #000;
height: 80px;
/*margin-top: -80px; */
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 1;
#media screen and (max-width: 960px) {
transition: 0.8s all ease;
}
`
export const NavbarContainer = styled.div`
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1'
width: 100%;
padding: 0 24px;
max-width: 1100px;
`
export const NavLogo = styled(LinkR)`
color: red;
justify-self: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`;
export const MobileIcon = styled.div`
display:none;
#media screen and (max-width: 768px) {
display: block;
position: absolute;
top: o;
right: 0;
transfrom: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
color: #000;
}
`
export const NavMenu = styled.ul`
display: flex;
align-itens: center;
list-style: none;
text-align: center;
margin-right: -22px;
#media screen and (max-width: 768px) {
display: none;
}
`
export const NavItem = styled.li`
height: 80px;
`
export const NavLinks = styled (LinkS)`
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
border-bottom: 3px solid #01bf71;
}
`

Answer 1

I don't know if it solves your problem, but:
In your code at the NavbarContainer after you set the z-index you have a quote instead of a semicolon.
And also at the NavMenu you wrote align-itens instead of align-items.
If you are using VSCode then install the following extension: vscode-styled-components