Well, I found the problem, it’s this bit in the CSS:
.widget-area .widget {
width: calc(33.3333% - 21.328px);
}
Which basically says “any widget should be about 1/3 the width of the block they’re in.” (The way it’s set up now, each nav button is its own widget.)
I guess whoever coded this just didn’t think anyone could ever want more than 3 widgets in a row?
The code is showing up in this file, which I think is some kind of automatic mashup of the CSS from a bunch of different sources:
https://407comic.com/_static/??-eJyVkNluAjEMRX+owWWKeKv6LVmsYMZZlIXR/D2mCGlmBK14iXLle66XKSubYsPYIHP3FCv4LtJg8WA6sQPDyY6KyRRdZqhtZtzZWj+md9F2wvASZT2n3pQv5NY9KFruDiucKwR0pJElRsilyIJjUYxe23kXKP5LS22pl8x2tEohMyqjY8SyVq+QM7as7Qghuc7SnWmU9+ntfq9S4YSXW/gfjosupEEWurvUlG0K76dtR5Ty43+z/oTv/fHwNXzuh8NwBbznzps=
Sooooo I’m not really sure if it’s coming from your theme, or the Jetpack plugin, or somewhere else.
But this bit of CSS should fix it:
.widget-area.webcomic-navigation .widget {
width: 10%;
margin: 0;
}
It overrides the “any widget” CSS by saying “widgets in the webcomic navigation, specifically, should be only 1/10 the width of the navigation block.”
You can make a new child theme to include the new CSS– google “WordPress child theme” for plenty of articles with step-by-step instructions on that. Or, since it’s just one small change, you can add this HTML directly to the template (I’d use the “Header and Footer” plugin to put it in the header):
<style>
.widget-area.webcomic-navigation .widget {
width: 10%;
margin: 0;
}
</style>
