make logo and title level with each other

Author: MoralCode

_layouts/default.html

@@ -23,15 +23,15 @@
 		}
 
 		img.logo {
-			max-width: 150px;
-			margin-bottom: 1rem;
-			margin: 0 auto;
+			max-width: 100px;
 			display: block;
 		}
 
 		h1.siteTitle {
 			font-weight: bold;
 			text-align: center;
+			margin: auto;
+			margin-left: .5rem;
 		}
 
 		header > p {
@@ -50,6 +50,10 @@
 			flex-wrap: wrap;
 			justify-content: space-around; 
 		}
+		.sidebyside {
+			display: flex;
+			flex-direction: row;
+		}
 		.flex-container > .card {
 			width: 400px;
 			/* margin: 2em; */

index.html

@@ -3,8 +3,10 @@
 title: Open Rowing Community
 ---
 <header>
-  <img class="logo" src="/assets/logo.svg" alt="The Open Rowing Community logo depicting a stick figure on a rowing machine in a black line art and simple shapes style. The circle making up the flywheel is only a half circle, attempting to symbolize openness in the open source software sense." />
-  <h1 class="siteTitle">{{ page.title }}</h1>
+  <div class="sidebyside">
+    <img class="logo" src="/assets/logo.svg" alt="The Open Rowing Community logo depicting a stick figure on a rowing machine in a black line art and simple shapes style. The circle making up the flywheel is only a half circle, attempting to symbolize openness in the open source software sense." />
+    <h1 class="siteTitle">{{ page.title }}</h1>
+  </div>
 
   <a href="https://pub.dev/publishers/openrowing.com/packages"><img alt="Static Badge" src="https://img.shields.io/badge/pub.dev-openrowing.com-blue"></a>
   <p>