Hello I am trying to create my own version of an existing website, but I can't seem to copy their header, below is my code
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style> @import url(https://fonts.googleapis.com/css?family=Poppins:400); #logo { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-top: 1rem; margin-left: 5rem; margin-right: 1rem; line-height: inherit; white-space: nowrap; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } nav { flex-grow: 1; font-family: 'Poppins', sans-serif; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; } ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { margin: 0 1vw; } .topnav { background-color: #252323 !important; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: absolute; padding: 1rem 1rem; position: sticky; width: 100%; } a{ color: white; text-decoration:none; font-size: 1.2rem; } .topnav #hover:hover { background-color: #1F9BDE; color: white; transition: background-color 0.3s; } .topnav a.active { color: orange; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; } .page{ padding: 0.2rem 1rem; margin: 1% 1%; border: none; border-radius: 4px; cursor: pointer; font-family: Poppins; font-weight: 400; transition: background-color 0.3s ease; } .btn { padding: 0.2rem 1rem; margin: 1% 1%; border: none; background-color: orange; color: #fff; border-radius: 4px; cursor: pointer; font-family: Poppins; font-weight: 400; transition: background-color 0.3s ease; }</style></head><body><div class="topnav" id="topnav"><a href="#"> <img id="logo" src="ActiveLearningLogo.png"> </a><nav><ul><li class="page" id="hover" style="float:right"><a href="#">Applicants</a></li><li class="page" id="hover" style="float:right"><a href="#">Accounts</a></li><li class="page" id="hover" style="float:right"><a href="#">Archives</a></li><li class="btn" id="hover" style="float:right"><a href="#">Sign Out</a></li></ul></nav></div></body></html>this is how it looks like when minimized
and this is t originally
i am just starting in HTML and CSS so i am new to most of these things but I do wish someone can help