Exact same code different result

im on part 3 on the html css course and i was designing the hero section and he did a hero section or however you call it and it was for mobile cuz he started first to mobile then he did for @media screen and (min-width: 768px) and all that and when i extend it the font was smaller and everything was weird so then i went to the files and copied the same code still have the problem i have to add this extra code but i dont know if this would be good on a actual website @media screen and (min-width: 1024px) {

.hero__heading {
font-size: 12rem;
margin-bottom: 0;
}
.hero__content {
margin-left: 1.8rem;
}

.hero__tagline {
font-size: 3rem;
margin: 3.5rem 0 7rem;
}

.hero–button {
font-size: 2.3rem;
padding: 3rem;
padding-right: 10rem;
padding-left: 10rem;
}
}

Mine ^ and

his