The text in your buttons is just too long to display in such a small viewport width. You’ve already lost the 4th tab off screen which makes this solution far from ideal.

I would suggest you use a media query to vertically stack the buttons on smaller viewports, that way they’re always visible. Taking it a step further you might use a select box to display these options as a dropdown instead.

Here’s an example using flex-box with a media query to stack the tabs.

HTML:

<section id="tabs">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="course-title">
          SOFTWARE DEVELOPMENT LIFECYCLE, IT SUPPORT AND TESTING
        </h2>

        <div class="tabContainer">
          <div class="buttonContainer">
            <button autofocus onclick="showPanel(0)">
              Course Details
            </button>

            <button type="button" onclick="showPanel(1)">
              Workshop Schedule
            </button>

            <button type="button" onclick="showPanel(2)">
              Online Course Details
            </button>

            <button type="button" onclick="showPanel(3)">
              Online Exam Details
            </button>
          </div>

          <div class="tabPanel">Do you know that...</div>
          <div class="tabPanel"></div>
          <div class="tabPanel"></div>
          <div class="tabPanel"></div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

.buttonContainer {
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) {
  .buttonContainer {
    flex-direction: row;
  }
}

.buttonContainer button {
    cursor: pointer;
    border: 1px solid #999;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    width: 100%;
}

.tabContainer .buttonContainer button:hover,
.tabContainer .buttonContainer button:focus,
.tabContainer .buttonContainer button:active {
    background-color: white;
    border-bottom: 1px solid white;  
}

.tabContainer .tabPanel {
    height: auto;
    width: auto;
    background-color: white;
    color: black;
    border: 1px solid #999;
    border-top: 0;
    list-style-position: inside;
    padding: 50px;
}

Just got a couple of questions in regards to html, css and bootstap.

Here are my two issues that refer to the screenshot below (left is firefox, right is chrome)

1: In firefox as you can see the content body is not aligned with the tabs when I make the window thin.

2: In chrome the tabs are not equal height, but is so in firefox. I have got it working in chrome once but it skews it in firefox when I make the css for .buttonContainer height 100%.

Tabs:

    <section id="tabs">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="course-title">
                        <h2>SOFTWARE DEVELOPMENT LIFECYCLE, IT SUPPORT AND TESTING</h2>
                    </div>
                    <div class="tabContainer">
                        <div class="buttonContainer">
                            <div class="buttonContainerTableCell"><button autofocus onclick="showPanel(0)">Course
                                    Details</button></div>
                            <div class="buttonContainerTableCell"><button onclick="showPanel(1)">Workshop Schedule</button>
                            </div>
                            <div class="buttonContainerTableCell"><button onclick="showPanel(2)">Online Course
                                    Details</button></div>
                            <div class="buttonContainerTableCell"><button onclick="showPanel(3)">Online Exam
                                    Details</button></div>
                        </div>
                        <div class="tabPanel">
                            < </div> <div class="tabPanel">
                        </div>

                        <div class="tabPanel">
                        </div>
                        <div class="tabPanel">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS:

    .tabContainer{
        width: 100%;
        height: auto;
    }

    .buttonContainer{
        width: 100%;
        display: table;
    }

    .buttonContainerTableCell{
        display: table-cell;
        height: 100%;
    }

    .tabContainer .buttonContainer button{
        width: 100%;
        height: 100%;
        float: left;
        outline: none;
        cursor: pointer;
        border: 1px solid #999999;
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px;

    }
    .tabContainer .buttonContainer button:hover{
        background-color: white;
        border-bottom: 1px solid white;  
    }

    .tabContainer .buttonContainer button:focus{
        background-color: white;
        border-bottom: 1px solid white;    
    }

    .tabContainer .buttonContainer button.active {
        background-color: white;
        border-bottom: 1px solid white;
    }

    .tabContainer .tabPanel{
        height: auto;
        width: auto;
        background-color: white;
        color: black;
        border-left: 1px solid #999999;
        border-bottom: 1px solid #999999;
        border-right: 1px solid #999999;
        list-style-position: inside;
        padding: 50px;
    }