Use classes rather than inline styling for indentation

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -64,8 +64,8 @@ const HeaderNavItem = ({ link, text, depth, className })=>{
 	};
 
 	return <li>
-		<a href={`#${link}`} target='_self' className={className}>
-			<span style={{ display: 'inline-block', width: `${depth * 0.5}em` }}></span>{trimString(text, depth)}
+		<a href={`#${link}`} target='_self' className={`depth-${depth} ${className ?? ''}`}>
+			{trimString(text, depth)}
 		</a>
 	</li>;
 };

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -20,6 +20,8 @@
 	li {
 		list-style-type: none;
 		a {
+			display: inline-block;
+			width: 100%;
 			font-family: 'Open Sans';
 			font-size: 12px;
 			padding: 2px;
@@ -32,6 +34,14 @@
 			&.pageLink {
 				font-weight: 900;
 			}
+
+			@depths: 1,2,3,4,5,6,7;
+
+			each(@depths, {
+				&.depth-@{value} {
+					padding-left: ((@value - 1) * 0.5em);
+				}
+			});
 		}
 	}
 }