Currently working on designing a webpage for my wife, I've encountered a CSS dilemma that's leaving me stumped. The image slider (RoyalSlider) I'm using has unwanted whitespace around it due to nested divs with padding, margins, and borders. Unfortunately, altering each element individually is not an option as the classes are reused throughout the page, and I'd rather not delve into the PHP code.
The problematic divs causing this issue are:
<div class="container">
#section-content .container {
padding-top: 20px;
}
#section-content .container {
border-left: 10px solid white;
border-right: 10px solid white;
}
<div class="eleven columns content sixteen no-thumbnail">
.content {
padding: 10px 0 0;
}
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
<div class="the_content post type-post hentry excerpt clearfix">
.content .hentry {
padding-bottom: 15px;
}
<div class="royalSlider">
<div class="rsOverflow">
<div class="rsContainer">
My idea of using greater than signs to prioritize the royalSlider div over others hasn't panned out, given my limited CSS knowledge.
Looking for a solution without breaking other elements on the page.
View the page here: Rachel Happen - High Res Royal Test Post
Here's a visual representation of the current vs. desired layout along with a color-coded breakdown of the CSS formatting: Image Comparison
Your assistance would be immensely appreciated.