I am not seeing excessive space on the right, however, you have a few issues, like the disappearing navbar. To fix this issue:
1. CSS Section markers:
\\\\ Order CSS \\\\\
should be:
2. If using
position: absolute;
you need to set
position: relative;
on the parent element.
3.
Top
,
Left
,
Right
,
Bottom
properties only work within a
position: absolute;
.
4.
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
is hiding your navbar.
So, to fix the above issues, you need to make the following changes:
header {
position: relative;
background: #a8b98a;
display: flex;
align-items: center;
justify-content: center;
}
media (max-width:800px){
header .navbar {
position: absolute;
background: #a8b98a;
border-top: .1rem solid rgba(0,0,0,.2);
border-bottom: .1rem solid rgba(0,0,0,.2);
padding: 1rem;
}
}
There are other issues however this fixes the disappearing navbar.
As for the space on the right, It might be your loader. I have that set to
display: none;
so I could see your page.