How do I adjust the margins in Harlowe 2.1.0?

Question

Using Harlowe 2.1.0. Not sure what I'm doing incorrectly here but the text of my project is only using 50% of the available screen and is rather squished because of it:

tw-story
{
    width: 100%;
}

tw-sidebar
{
display: none;
}

I've tried different percentages of the above but nothing has changed. EDIT: So going above 100% does make the text use up more of the space on the right side but there's still the sidebar on the left taking up space even though it has no elements. Can that sidebar be deleted entirely?

Answer 1

If you use your web-browser's builtin Web Development Tools to Inspect the HTML elements that make up the page (and the associated CSS) you will see that the tw-story element has a left & right padding of 20%, and this is what is causing the blank areas to either side of the main passage area.

You can use CSS like the following within the Story Stylesheet area to reduce the size of that padding so that it is the same as the top & bottom.

tw-story {
	padding: 5%;
}

... this however will not get rid of the 'side-bar' content.

> Can that sidebar be deleted entirely?
The 'side-bar' is actually a repositioned special header, which you can visually suppress by adding CSS like the following to the same Story Stylesheet area.

tw-sidebar {
	display: none;
}