posts look alright now

src/lib/Layout.svelte

@@ -10,7 +10,13 @@
 </script>
 
 {@render PostHeader(post)}
-{@render props.children?.()}
+<div class="content-div">
+	{@render props.children?.()}
+</div>
 
 <style>
+	.content-div {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 </style>

src/lib/PostHelpers.svelte

@@ -99,6 +99,7 @@
 			<div class="card-header-container-left">
 				<span>{post.title}</span><span>{post.description}</span>
 			</div>
+			<div class="card-header-container-right"></div>
 		</div>
 	</div>
 {/snippet}
@@ -115,12 +116,16 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		padding-top: 10px;
 	}
 	.card-header-container {
 		display: flex;
 		flex-direction: row;
+		justify-content: space-between;
 		flex-grow: 1;
-		max-width: 1000px;
+		width: 100%;
+		min-width: 250px;
+		max-width: 750px;
 		background-color: var(--accent-3);
 		border: 3px, inset, var(--accent-2);
 	}
@@ -135,6 +140,17 @@
 			border-left-color: whitesmoke;
 		}
 	}
+	.card-header-container-right {
+		display: flex;
+		flex-direction: column;
+		row-gap: 3px;
+		span {
+			padding-right: 4px;
+			border-right-style: inset;
+			border-right-width: 3px;
+			border-right-color: whitesmoke;
+		}
+	}
 	.card {
 		--text-color: white;
 		position: relative;
@@ -152,7 +168,7 @@
 		flex-grow: 1;
 		flex-shrink: 0;
 
-		border-style: ridge;
+		border-style: outset;
 		border-color: var(--accent-2);
 		border-width: 4px;
 

src/lib/nav.svelte

@@ -5,6 +5,7 @@
 {#snippet NavBar()}
 	<nav class="nav">
 		<a href="/">Home</a>
+		<a href="/posts">Posts</a>
 	</nav>
 {/snippet}
 
@@ -13,7 +14,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		justify-content: space-around;
+		justify-content: center;
 		width: 100%;
 		height: 32px;
 		background-color: var(--accent-2);