HELP: need css guidance

[konamiesque]

right now i'm trying to put together the basic layout of my site, but i've hit a few snags and need some help.

here's what i have so far:

Spoiler

[close]

my biggest issues:

• i'm really confused about how positioning works and none of the tutorials i've checked out have made it any clearer, but i want everything to be centered horizontally on the page
• while i've managed to make the inner colors in the sidebars the same size, i can't get them to align in the same place
• my custom fonts won't load when i open the html file in firefox even though they show up just fine in vscode
• on the actual page i'm working on, the center box has the proper margins, but when i replaced the text with lorem ipsum, that big ugly gap appeared out of nowhere

and here's my code, just for reference:

Code

@font-face{
    font-family: "veniceclassic";
    src: url("/styles/veniceclassic.ttf") format("truetype")
}

@font-face{
    font-family: "spectral";
    src: url("/styles/spectral.ttf") format("truetype")
}
html{
    background-image: url("ornate.png");
}

.pagestructure{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
}

main{
    background-color: #222222; 
    border: #eeeeee 1px solid; 
    margin: 5px;
    width: 600px;
}

.pageheading{
    background-color: #5f1a09; 
    border: #eeeeee 1px solid;
}

.pagecontent{
    background-color: #7f7f7f; 
    margin: 15px 15px; 
    padding: 1px 10px;
}

.sidebar{
    background-color: #222222; 
    border: #eeeeee 1px solid; 
    margin: 10px;
    max-height: 300px;
    width: 150px;
}

.sidebarlinks{
    background-color: #7f7f7f; 
    margin: 15px 15px; 
    padding: 5px 10px;
    min-height: 200px;
    text-align: center;
}

h2{
    color: #eeeeee; 
    font-size: 16px; 
    text-align: center;
    font-family: "spectral";
}

p, li{
    color: #eeeeee; 
    font-size: 16px; 
    list-style-type: none;
    font-family: "spectral";
}

h1{
    color: #eeeeee; 
    margin: 1%;
    font-family: "veniceclassic";
}

strong{font-weight: bold;
}

footer{
    color: #eeeeee; 
    font-size: 14px; 
    text-align: center;
    font-family: "spectral";
}

a:link{
    color: #5f1a09;
    font-size: 14px;
}

a:visited{
    color:#230801
}

a:hover{color: #cfb004;
}

*while i think that the selectors i use are pretty self-explanatory, i do want to clarify that .pagestructure targets all three boxes, while .pageheading and .pagecontent specifically target the middle box.

[shevek]

It seems to me like what is moving your design around or causing misalignment is that the flex aspect of it all understandably shrinks or expands with the text. For example, Site Information is one row while Explore The Archive is two. You can get around that by adding a line break or, in other areas of the site, set a min-height that it has to have, so it doesn't become smaller when less text is there, like it does right now. Similarly, if you don't want it to become huge with more text and become misaligned, you might want to add a max-height and make it so a scrollbar appears with overflow: auto.
What could also be helpful is toying around with display: inline-block;.

In regards to the font issue with Firefox, I have faced similar issues in the past and it seems important to supply Firefox with a different font format (woff, woff2) other than ttf. You can use FontSquirrel to turn your ttf into the other formats if you don't already have the woff formats.

This is how I had to implement my custom font so it worked for FF:

Code

  @font-face {
      font-family: 'rainyhearts';
 src: url('https://daintyeco.neocities.org/about/rainyhearts-webfont.woff2') format('woff2'),
       url('https://daintyeco.neocities.org/about/rainyhearts-webfont.woff') format('woff'),
       url('https://daintyeco.neocities.org/about/rainyhearts-webfont.ttf') format('truetype'),
       url('https://daintyeco.neocities.org/about/rainyhearts-webfont.svg#rainyhearts') format('svg');
  font-weight: normal;
  font-style: normal;

[konamiesque]

You can get around that by adding a line break

can't believe i forgot about line breaks... went and added one to the right sidebar and yep, it snapped right into place

not sure why i didn't think to set a minimum height for my middle box either, especially when i had already done that for my sidebars. i think i must have been too tired and frustrated for my brain to work properly when i drafted this post last night lol. but the memory jog was very much helpful, so thanks!