I have a small, green border on the right, to add a little readability. If you shrink the window however, you can see it just ends up covering everything. It looks equally absurd on a mobile device screen too. How do I make it so it resizes?
body {
color: #325050;
background: #fff;
font-family: 'Libre Baskerville', sans-serif;
font-size: 80%;
border-right: 50em solid;
}
Try it like this:
body {
color: #325050;
background: #fff;
font-family: 'Libre Baskerville', sans-serif;
font-size: 80%;
border-right: 50vw solid; /* changed*/
}
1vw = 1% of viewport width
1vh = 1% of viewport height
These measurements give you a nice way to define width and height of things like border in percentages.
For sizing things relative to the current viewport size you can find out more here