W3.CSS Vertical Tabs problem

[plox]

Hello

I am on win 7, copied the Tryit example for Vertical Tabs  into my editor. I noticed these differences when I view it in my browsers ( I am using the pro version of the css so the colours do not show):

• The example shows a border around the whole page - mine doesn't  - see W3.CSS Vtabs.png
• Probably because it fills the full page and I can't tell if there is a border present

So I decided to add a W3.CSS Card to contain the Tab code within it:

<div class="w3-container">
		<div class="w3-card-4 w3-margin" style="width:95%;">
        	....code for tabs
  		</div>
</div>

It still does not show the border around the tabs and the corresponding tabbed content but the tab side bar is not contained in the card container and overflows above it. See enclosed sidebar.png screenshot.

 

The w3-sidebar class seems to be what is causing the problem so I removed from the declaration:

<div class=" w3-bar-block w3-yellow w3-card-2 w3-border w3-round-medium w3-margin" style="width:130px">

The Tabs are contained in the card container but the corresponding tab content is on longer aligned with the respective tab (without sidebar.png).

Thank you in advance for your help and assistance.

 

Edited August 15, 2017 by plox
remove items

[Sunamena]

Image 2 is the closest to the last one (the example i presume?). 
The left div does not need any margin. Try adding: 
margin: 0;

And the right div would need:
vertical-align: top;