They’re not actually taking up half the space they should as that area is divided into 2 columns, they’re displaying correctly.
You can inspect your sites code by right-clicking on it and selecting your browsers Inspect Element tool, simply highlight some code and you can view the CSS being applied to it.
You can alter the CSS of that column to make it span across those 2 columns by adding this code via a Child Theme style.css file or a Custom CSS plugin.
.column-one.home-column {
padding: 8px 10px;
width: 530px;
border: 0;
}
To maintain a level of responsiveness we can also add this:
@media only screen and (min-width: 700px) and (max-width: 979px) {
.column-one.home-column {
width: 690px !important; }
}
@media only screen and (min-width: 650px) and (max-width: 699px) {
.column-one.home-column {
width: 650px !important; }
}
The theme you’re using makes use of !important many times, so to override this we also need to use it.
Hope this helps.
