Fix right-side alignment of content area on non-homepage pages

[dscho]

Changes

Fix right-hand side alignment:

Before	After

Context

In 9f2a5ae ("Continue to display sidebar when page scrolls"), the layout of #content-wrapper was converted from floats to flexbox in order to support position: sticky on the sidebar. That commit removed float: left from aside and float: right from #content, and added display: flex to #content-wrapper.

However, the old float layout relied on the fact that #content was floated to the right: the sidebar (218px) and the content area (702px) together only add up to 920px inside a 940px container, with the remaining 20px forming a gap between them. With float: right, the content area was pushed flush against the right edge of the container, so its right edge aligned perfectly with the header above. After the switch to flexbox, both children are packed to the left by default (the initial value of justify-content is flex-start), leaving the 20px gap on the right side instead of between the two elements. This caused the right edge of the content area to be visibly misaligned with the right edge of the header's search bar and dark-mode toggle.

The fix is to add justify-content: space-between to #content-wrapper, which restores the original float-era behavior: the sidebar sits at the left edge and the content area sits at the right edge, with the 20px gap between them.

A Playwright test is included that verifies the right edge of #content is flush with the right edge of #content-wrapper. This test was used to bisect and confirm that the regression was introduced in 9f2a5ae.

Assisted-by: Claude Opus 4.6

[jvns]

The fix makes sense to me, thanks for catching this! I double checked what the site looked like before 9f2a5ae, and there was indeed a gap between the sidebar and the content, it looked like this:

[dscho]

@jvns thank you for reviewing it! TBH the credit for finding this should go to @To1ne, I would never spot something like this...