adding padding to a heading within a container that already has padding - html

Question

I am currently trying to add padding to the heading of this container and for some reason it's not letting me add any padding to the left or right. The image below show what it looks like at the moment.
here is my code:
<?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">%s<div class="pull-right">%s</div><p>%s</p><hr></div>', $item_permalink, $item_title, $item_post_date, $item_excerpt);
endforeach;
endif;
endif;
?>
Here is my 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;
}
in .rss-container I added this: padding: 0 20px 0 20px;
and .rss-heading padding: 15px 30px; I tried to change 30px to another value since I just want it to change left and right and it continued to change top and bottom. Any help would be appreciated!

Answer 1

To change just the left and right padding values, you can't use the 'padding' shortcut. Explicitly specify:
padding-right: 30px;
padding-left: 30px;
That will leave top and bottom unchanged.