Hello Lee,
Your site’s content column width is defined here:
.page-content {
position: relative;
overflow: hidden;
margin: 20px 0 0;
padding: 20px 15% 5%;
width: 70%;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff;
color: #363636;
font-size: 18px;
}
Use Customizer (or your theme’s custom CSS option) to increase the width (while decreasing the left and right paddings accordingly) as you desire.
If you’re new to CSS, note that the padding
padding: 20px 15% 5%;
Can be expended as:
padding: 20px 15% 5% 15%;
You could use:
.page-content {
padding: 20px 0% 5%;
width: 100%;
}
When you do this, you’ll realize the entire page will be left aligned. This is due to a max-width of 1400px and various margins defined on the body. To center the entire page, add this in Customizer:
body {margin: auto}
Hi Lee,
In addition to what @gappiah explained, here you have an example on how to get rid of that padding:
.home .page-content {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
Note that I’m using the .home class selector in front to make it more specific and therefore take precedence over the existing style rules.
Also, once you apply this code, you will need to adjust a margin in your slider since it is positioned taking the padding into account. Further more, you may want to modify the template (I assume you are coding this theme) and take the slider outside of the page-content container.
Last, I’m seeing and extra ‘}’ rendering at the bottom of your page.
Hope it helps. Take care!
