Width 100% isn't using full screen - html

Question

I've built a modified tab-chart. When you click on the tabs on the left hand side, they switch the content on the right. The only problem is the main content div on the right, even with a width of 100% is only going about a third of the way across the screen. Any ideas why?
* {
padding: 0;
margin: 0;
}
#container {
display: block;
height: 100%;
width: 100%;
}
#topBar1 {
height: 55px;
width: 100%;
background-color: #FAFAFA;
border-bottom: 1px solid #d9d9d9;
display: block;
position: relative;
z-index: 2;
}
#topBar2 {
height: 22px;
width: 100%;
background-color: #FAFAFA;
display: block;
border-radius: 11%;
box-shadow: 0 6px 10px -2.5px #ccc;
position: relative;
z-index: 2;
transition: all;
}
main {
display: block;
background-color: #EEEEEE;
height: 1000px;
width: 100%;
position: relative;
z-index: 1;
top: -5px;
}
nav {
height: 100%;
width: 261px;
}
nav::after {
height: 100%;
width: 1px;
content: "";
display: block;
background: #d9d9d9;
position: relative;
left: 260px;
top: -1000px;
}
input[type=radio] {
display: none;
}
.tabs {
list-style: none;
position: relative;
//border: 1px solid #ccc;
width: 260px;
height: 100%;
top: 15px;
}
.tabs li {
font-family: Roboto, sans-serif;
font-size: 13px;
padding: 10px 20px 20px 60px;
color: #222222;
//border: 1px solid #ccc;
background-color: none;
transition: all .2s ease-in-out;
}
.tabs li:hover {
background-color: #d9d9d9;
}
.tabs li:active {
background-color: #d9d9d9;
}
.tabs label {
display: block;
position: relative;
cursor: pointer;
top: 6px;
}
.tab-content {
position: absolute;
display: none;
z-index: 2;
height: 100%;
width: 100%;
left: 261px;
top: 0;
border: 1px solid #ccc;
}
[id^=tab]:checked~[class^=tab-content] {
display: block;
}
.contentItem {
//border: 1px solid #ccc;
height: 38px;
width: 200px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 10px;
background-color: #FAFAFA;
box-shadow: .5px 2px 6px #ccc;
float: left;
}
.documentIcon {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 3px;
margin-left: 5px;
margin-right: 10px;
float: left;
}
.contentText {
font-family: Roboto, sans-serif;
font-size: 12px;
color: #222222;
line-height: 3;
}
<div id="container">
<div id="topBar1"></div>
<!--topBar-->
<div id="topBar2"></div>
<!--topBar2-->
<main>
<nav>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked />
<label for="tab-1">Staff Directory</label>
<div class="tab-content" id="tab-content-1">
<div class="contentItem" id="ci1">
<img src="" alt="" class="documentIcon" />
<p class="contentText">Telephone Extension List</p>
</div>
</div>
<!--tab-content-->
</li>
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">How-To Guides</label>
<div class="tab-content" id="tab-content-2">
<p>Put Tab 2 Content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">OECTA Calendar</label>
<div class="tab-content" id="tab-content3">
<p>Put tab content 3 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-4" />
<label for="tab-4">Finance</label>
<div class="tab-content" id="tab-content-4">
<p>Put tab content for 4 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-5" />
<label for="tab-5">Directories and Contact Lists</label>
<div class="tab-content" id="tab-content-5">
<p>Put Tab 5 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-6" />
<label for="tab-6">Upcoming Meetings</label>
<div class="tab-content" id="tab-content-6">
<p>Put tab 6 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-7" />
<label for="tab-7">Manuals and Handbooks</label>
<div class="tab-content" id="tab-content-7">
<p>Tab Content 7</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-8" />
<label for="tab-8">Information and Forms</label>
<div class="tab-content" id="tab-content-8">
<p>Tab Content 8</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-9" />
<label for="tab-9">Visitor Information</label>
<div class="tab-content" id="tab-content-9">
<p>Tab Content 9</p>
</div>
</li>
</ul>
</nav>
</main>
</div>

Answer 1

You looking for something like this? https://jsfiddle.net/csgn6051/9/
.tabs
{
width: calc(100% - 270px);
}