Edge and Chrome look the same to me here from your codepen. Are you testing the codepen or is this your real page you have the screenshots from?
If it’s a real page then try clearing the cache in Chrome because this is what I see in your codepen.
As this is a learning exercise I must again point out the following rules from your codepen that make no sense. You have repeated almost the same rules a number of times (in each stylesheet).
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
border: none;
outline: none;
color: #fff;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
text-decoration: none;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
text-decoration: none;
}
The only difference being that you changed the font family so only the last font family is active for the whole page.
You only need one set of those rules and it should be the first rule in the first stylesheet. However as I have said a number of times using the universal selector in that way kills inheritance and the only global rule you want from that lot is this:
* {
padding: 0;
margin: 0;;
}
Of course even that is overkill and will break a lot of form elements. Most people usually use a reset stylesheet instead and address elements by name. As you don;t have enough experience to do that I suggest you change the above to these rules instead.
html,
body {
scroll-behavior: smooth;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: "Space Grotesk", sans-serif;
font-size: 62.5%;
background: #000;
color: #fff;
}
a {
text-decoration: none;
color: #fff;
}
Note that I removed this rule:
* {
border: none;
outline: none;
}
If you remove outline then you make it impossible for anyone to navigate with the keyboard. You must always set :focus rules which generally have an outline set by default. Also the border:none rule will break most form elements so is not a good rule to have under the universal selector.
