Increase Width of Hestia WordPress Container

This site is built using WordPress and styled with the Hestia theme. Hestia uses Bootstrap as a layout framework with the main boxed element being a container, this has a max width of 1170px on viewports over 1200px wide. As this blog uses a lot of code elements which frequently exceed this width the text gets wrapped which can look a bit confusing. To fix this I’ve added an additional container width in the site CSS so that when viewed on a larger screen the container width will be increased.

Additional CSS can be added to a site using Hestia by navigating to Appearance -> Customize -> Additional CSS and entering your desired CSS.

I added an additional container width at (a rather arbitrary) 1600px.

@media (min-width: 1600px) {
	.container {
		width: 1570px;
	}
}