header css fixed, uses rem due to image being strange

src/Header/Header.css

@@ -5,9 +5,13 @@ header {
 	margin-top: 0%;
 }
 
-#logo {
-	width: 10%;
+figure {
+	margin: 0px;
 	height: 10%;
+}
+
+#logo {
+	height: 5rem;
 	background-color: white;
 }
 

src/Header/Header.js

@@ -37,15 +37,17 @@ const Header = () => {
 	return (
 		<>
 			<header>
-				<div>
+				<figure>
 					<img
 						id="logo"
 						onClick={() => LinkTo("/")}
 						src={logo}
 						alt="Schulich Off-Road's logo"
 					/>
-					<h2>Schulich Offroad</h2>
-				</div>
+					<figcaption>
+						<h2>Schulich Offroad</h2>
+					</figcaption>
+				</figure>
 				<nav>
 					<OpenPageButton
 						pageToGoTo={"/"}