Your viewport meta tag has some issues:
<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
In the above code snip from your question you have user-scale=no. That should be user-scalable=no, but is not recommended since it limits the ability to zoom which is an accessability concern.
Also maximum-scale=1.0, minimum-scale=1.0 are frowned upon for zooming reasons as well.
The preferred viewport meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
See this for more about the viewport meta tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You also do not show any media queries in your css.
So my open menu/hamburger icon keeps displaying under the logo of the nav, I have no clue how to make it display where it actually should be according to best practice on the far right side of the header menu on desktop and on mobile without doing right:-220 or whatever. There has to be a better way.
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}
<!doctype html>
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<title> Juno College </title>
<meta-http-equiv="X-UA-COMPATIBLE" content="ie-edge">
<!--GGL FONTS-->
<link herf="https://fonts.google.com/specimen/Cormorant+Garamond"
rel="stylesheet">
<link href="https://fonts.google.com/specimen/Montserrat"
rel=stylesheet">
<link rel="stylesheet" link href="style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="nav-brand">
<a href="site.html">
<img src="assets/juno-logo.png" alt="">
</a>
</div>
<div class="mobile-open open">
<i class="mobile-open">
<img src="assets/mobile-open.png"> </i>
</div>
<ul class="nav-list">
<div-class="mobile-close close">
<i class="mobile-close">
<img src="assets/mobile-close.png"> </i>
<li class="nav-item">
<a href="#" class="nav-link">Course</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Alumni</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="dog-main">
<div class="container">
<div class="main-message">
<h1> Tech challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet. Tristique risus nec feugiat in fermentum posuere urna. Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida arcu ac tortor dignissim. Tristique nulla aliquet enim tortor at auctor. Quam id leo in vitae turpis massa. Tellus mauris a diam maecenas sed enim. </p>
<div class="cta">
<a href="#" class="btn"> Begin Your Journey at Juno </a>
</div>
<script type="text/javascript" src="scripts.js" ></script>
</section>
</body>
</html>
you should lint your css and html syntax; there are some glaring issues with it that won’t help you solving it. eg
