I'm currently struggling to apply padding to the header of this container. For some reason, I can't seem to add any padding to the left or right. The image below illustrates the current appearance.
Here's the code snippet:
<?php
$feed = 'http://miletich2.blogspot.co.uk/feed/';
$rss = fetch_feed($feed);
?>
<div class="container">
<div class="clear">
<div class="right">
<div class="rss-container">
<div class="rss-heading">
<?php
$title = "Clashing With Life";
$description = 'This is a blog written by an autistic person for other autistic people about <br>some of the biggest issues in life, whether deplorable or marvelous.';
echo '<h3 class="text-center title">' . $title . '</h3>';
echo '<p class="text-center">' . $description . '</p>';
?>
</div>
<?php
if ( !is_wp_error($rss) ) :
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
if ($rss_items):
foreach ($rss_items as $item) :
$item_title = esc_attr( $item->get_title() );
$item_permalink = esc_url( $item->get_permalink() );
$item_post_date = $item->get_date( get_option('date_format') );
$item_excerpt = wp_trim_words( wp_strip_all_tags( $item->get_description(), true ), 50 );
echo sprintf('<div class="spacing"><a href="%s" target="_blank">%s</a><div class="pull-right">%s</div><p>%s</p><hr></div>', $item_permalink, $item_title, $item_post_date, $item_excerpt);
endforeach;
endif;
endif;
?>
And here is the CSS:
.right{
float:right;
}
.rss-container{
max-width: 400px;
width: 100%;
margin: 25px auto;
background: #f4f4f4;
padding: 0 20px 0 20px;
}
.rss-heading {
background: #7ED321;
color: #000;
padding: 15px 30px;
border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
font-weight: bold;
}
.rss-heading p{
font-size:9px;
}
hr{
border-top: 1px solid #DCDCDC !important;
}
.article-head{
line-height: 2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.clear{
clear:both;
}
.spacing a {
line-height: 2em;
font-size: 15px;
}
.pull-right{
line-height: 2em;
font-size: 15px;
}
h3.title {
font-family: Roboto Condensed !important;
font-weight: bold;
}
Within the rss-container class, I've included padding: 0 20px 0 20px;, and for .rss-heading padding: 15px 30px;. I attempted to adjust 30px to achieve changes in the left and right padding, but it only affected the top and bottom padding. Any advice on this issue would be greatly appreciated!