Remove whitespace around Featured area on home page

Does that theme have a custom CSS option? You really don’t want to be making changes to your theme files because they will be erased when the theme is updated. So if not, you could use a Custom CSS plug-in or make a child theme. That said, the space is being created partly by the padding in this CSS:

#pageContent {
    padding: 30px;
}

You’d probably want to change it to:

#pageContent {
    padding: 0 30px;
}

But below it, there is also a bunch of HTML code that is creating the empty space:

<div class="hrWrap">
<div class="horizontalRule" style="height:30px;"></div>
<div class="hr" style="height:30px;"></div>
</div>

You’ll need to figure out where that is coming from in the template for that page or possibly use CSS to hide it:

.hrWrap {
   display: none;
}

However, if that element is used on other pages, it may also remove it there — if not desired, you can target only the home page by using this instead:

.home .hrWrap {
   display: none;
}

WPyogi’s well-thought, detailed response should resolve this issue.

WPyogi, you are so nice! Thanks very much for your help. I couldn’t get rid of as much white space as I’d have liked, but it looks much better after I made the changes you suggested. Your time is appreciated.

Best,
Alex