responsive widgets

I added a row of widgets under the Featured pages on the homepage.
Here is the code I used.

add_filter( 'tc_default_widgets' , 'add_featured_page_widget' );
function add_featured_page_widget( $defaults ) {
	$defaults['fp_widgets'] = array(
                    'name'                 => __( 'Featured Pages Widget One' , 'customizr' ),
                    'description'          => __( 'Below the featured pages area on home' , 'customizr' )

	);
	$defaults['fp_widgets_two'] = array(
                    'name'                 => __( 'Featured Pages Widget Two' , 'customizr' ),
                    'description'          => __( 'Below the featured pages area on home' , 'customizr' )

	);
	$defaults['fp_widgets_three'] = array(
                    'name'                 => __( 'Featured Pages Widget Three' , 'customizr' ),
                    'description'          => __( 'Below the featured pages area on home' , 'customizr' )

	);
    return $defaults;
}

add_action('__after_fp' , 'display_my_fp_widget');
function display_my_fp_widget() {
    dynamic_sidebar('fp_widgets');
    dynamic_sidebar('fp_widgets_two');
    dynamic_sidebar('fp_widgets_three');
}

I styled the widgets with CSS:

aside#rss-3.widget.widget_rss, aside#text-5.widget.widget_text, aside#nav_menu-2.widget.widget_nav_menu {
    width: 25%;
    float: left;
    margin: 30px 0px 10px 100px;
}

I am trying to make those three widgets responsive but it doesn’t seem to be working. I added this to the style sheet:

@media screen and (max-width:320px) {
aside#rss-3.widget.widget_rss, aside#text-5.widget.widget_text, aside#nav_menu-2.widget.widget_nav_menu {
    width: 100%;
    margin: 5px; }
}

I did try adding a div class to the widget code for each one but that took away the styling so I decided to just use the default “aside” so all I would have to do is change the width and margins.

Any help would be appreciated. TIA