If you open the dev tools in your browser, you'll be able to identify the exact element that's causing the issue. My guess is it's the body element. Try
body {
margin-left: 3.5em;
}
You will probably also have to increase the passages width and the font size to get it to match the picture exactly. The left border is caused by the body margin, but the right border is caused by the passage width. If you look at dev tools you should be able to see how the elements are positioned, as well as make some temporary css changes to figure out what numbers to adjust.
Using your suggestion I've found a few ways of doing what I want but they all screw up the scaling on smaller windows, so I've just decided to leave it as it, thanks anyway.
For CSS when you change one thing you might have to change others. SugarCube has default media query rules that govern how it appears on smaller screens that you may need to change further once you change something else.
Comments
You will probably also have to increase the passages width and the font size to get it to match the picture exactly. The left border is caused by the body margin, but the right border is caused by the passage width. If you look at dev tools you should be able to see how the elements are positioned, as well as make some temporary css changes to figure out what numbers to adjust.
into your story. The 72 can be replaced with any number; the default is 54.
Eg if you want to introduce separate #passages rules for screens under 1920px wide you would insert after the #passages css:
More information: https://css-tricks.com/css-media-queries/
For CSS when you change one thing you might have to change others. SugarCube has default media query rules that govern how it appears on smaller screens that you may need to change further once you change something else.