Tabbed Content Border Won't Show Up

Question

This is probably an easy one but I can't figure it out. I'm placing tabbed content in a two column 70:30 ration content area. With the tabbed content being in the 70% area, I cannot get the right border to render as seen here on my test page: http://www.realtimehockey.net/testing1.html I've played with the padding and margins both left and right and still can't seem to get it right. Any input would be welcome.

Below is the CSS that I am using. With an Excel Spreadsheet embedded in the content, the HTML drastically exceeds the 30,000 character limit here.

CSS

<style>
    td,
    tr {
        border-style: none
    }
    A {
        text-decoration: none
    }
    a:link {
        color: #0000ff;
    }
    a:visited {
        color: #0000ff:
    }
    a:hover {
        color: #ff6600;
    }
</style>


<style>
    .tabs input[type=radio] {
        display: none;
        text-decoration: none;
    }
    .tabs {
        width: 100%;
        height: 1100px;
        float: none;
        list-style: none;
        position: relative;
        padding: 0px;
        margin-right: 5px;
        margin: 5px;
        margin-top: 2px;
    }
    .tabs li {
        float: left;
    }
    .tabs label {
        display: block;
        padding: 10px 20px;
        color: #FFFFFF;
        font-family: patua one;
        font-style: italic;
        font-size: 14px;
        background: linear-gradient(#151515, #080808);
        cursor: pointer;
        position: relative;
    }
    .tabs label:hover {
        background: #ff6600;
    }
    .tab-content {
        z-index: 2;
        display: none;
        left: 0;
        font-size: 20px;
        line-height: 140%;
        padding: 5px;
        margin-right: 5px;
        position: absolute;
        box-sizing: border-box;
        border: 3px solid #454545;
        border-top: 7px solid #454545;
        background-color: #ffffff;
    }
    [id^=tab]:checked + label {
        background: #ff6600;
        color: white;
        top: 0;
    }
    [id^=tab]:checked ~ [id^=tab-content] {
        display: block;
    }
</style>

<style id="OrgsAtoD56_5439_Styles">
    <!--table {
        mso-displayed-decimal-separator: "\.";
        mso-displayed-thousand-separator: "\,";
    }
    .xl155439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: black;
        font-size: 11.0pt;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl655439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: white;
        line-height: 2px;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        font-family: "Patua One", monospace;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        background: white;
        mso-pattern: black none;
        white-space: nowrap;
    }
    .xl665439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: white;
        line-height: 2px;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        font-family: "Patua One", monospace;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        background: black;
        mso-pattern: black none;
        white-space: nowrap;
    }
    .xl675439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: red;
        font-size: 10.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        background: white;
        mso-pattern: black none;
        white-space: nowrap;
    }
    .xl685439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: red;
        font-size: 10.0pt;
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        font-family: "Patua One", monospace;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        background: white;
        mso-pattern: black none;
        white-space: nowrap;
    }
    .xl695439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: black;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl705439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: #0563C1;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl715439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: windowtext;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl725439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: black;
        font-size: 12.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Candara, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl735439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: windowtext;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl745439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: white;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl755439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: white;
        font-size: 11.0pt;
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        font-family: Calibri, sans-serif;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        mso-background-source: auto;
        mso-pattern: auto;
        white-space: nowrap;
    }
    .xl765439 {
        padding-top: 1px;
        padding-right: 1px;
        padding-left: 1px;
        mso-ignore: padding;
        color: white;
        line-height: 14px;
        font-size: 11.0pt;
        font-weight: 400;
        font-style: italic;
        text-decoration: none;
        font-family: "Patua One", monospace;
        mso-font-charset: 0;
        mso-number-format: General;
        text-align: general;
        vertical-align: bottom;
        background: #FF6600;
        mso-pattern: black none;
        white-space: nowrap;
    }
    -->
</style>
<style>
    #table-wrapper {
        position: relative;
    }
    #table-scroll {
        height: 965px;
        width: auto;
        overflow: auto;
        margin-top: 10px;
    }
    #table-wrapper table {
        width: auto;
    }
    #table-wrapper table * {} #table-wrapper table thead th .text {
        position: absolute;
        top: -20px;
        z-index: 2;
        height: 20px;
        width: auto;
    }
</style>

Answer 1

Well implement this in you css and html you will get it

.zpwrapper { padding: 0;}

and also change this

.zpcolumns {
    margin: 0 -7px;
}

into

.zpcolumns {
    margin: 0;
}

change this

<div class="zpflLeft zpcolumn" style="width:70%">

in to this

<div class="zpflLeft zpcolumn" style="width:71%">

Note if you don't want increase your percentage width from 70% to 71% then kindly replace relevant css with this

.tab-content {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #454545;
    border-image: none;
    border-right: 3px solid #454545;
    border-style: solid;
    border-width: 7px 3px 3px;
    box-sizing: border-box;
    display: none;
    font-size: 20px;
    left: 0;
    line-height: 140%;
    margin-right: 0px;
    padding: 0px;
    position: absolute;
    z-index: 2;
}




#table-scroll {
    height: 965px;
    margin-top: 0px;
    overflow: auto;
    width: auto;
}