嵌套选项卡中的内容未显示完整的100％宽度

Question

I have nested tabs set up but the contents inside the second set of tabs ( #tab-2-1 , #tab-2-2 , #tab-2-3 ) aren't stretching to their full 100% width. Is there something I missed?

HTML

<ul class="tabs">
    <li><a href="#tab1">Bonus Episodes</a></li>
    <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/44386375%3Fsecret_token%3Ds-bi246&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
</div>
<div id="tab2" class="tab_content">
    <ul class="tabs">
        <li><a href="#tab2-1">Foreally Stream</a></li>
        <li><a href="#tab2-2">Ross</a></li>
        <li><a href="#tab2-3">Jude</a></li>
    </ul>
    <div id="tab2-1" class="tab_content">
        [videogallery id="video-stream"]
    </div>
    <div id="tab2-2" class="tab_content">
        [videogallery id="ross"]
    </div>
    <div id="tab2-3" class="tab_content">
        [videogallery id="jude"]
    </div>
</div>

CSS

.tab_content { 
  background:#000;
  color:#fff;
  max-width:500px;
  padding:10px 
}
.tabs li { 
  display:inline;
  list-style:none 
}
.tabs a { 
  background:#7c7c7c;
  border-radius:5px 5px 0 0;
  color:#dadada;
  display:inline-block;
  font-size:2em;
  padding:10px 15px 8px;
  text-decoration:none 
}
.tabs a.active { 
  background:#e32d2d;
  color:#fff 
}
#tab2 ul.tabs a { 
  background:transparent;
  color:#999;
  padding:10px 10px 0 10px 
}
#tab2 ul.tabs a.active { 
  color:#fff 
}

JS

jQuery('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = jQuery(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
        jQuery(this.hash).hide();
    });

    // Bind the click event handler
    jQuery(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = jQuery(this);
        $content = jQuery(this.hash);

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

Answer 1

In your CSS:

.videogallery .sliderMain {
    width: 100%!important;
}

The .videogallery .sliderMain is being given an inline style with a width of 100px.

Whatever created the markup from the [videogallery] shortcode (WordPress plugin perhaps?) is giving it the 100px width. You can either override this in your CSS (with the above) or you can investigate further how it is calculating the 100px by digging through the JS/CSS for the videogallery plugin.

Hope that helps.