Ошибка в моем HTML-коде

function show(id) {
  if (document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
  }
  return false;
}

function hide(id) {
  if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  }
  return false;
}

.borderradius {
  border-radius: 11px;
}

.content {
  width: 800px;
  margin: 0 auto;
}

.my_text {
  font-family: "Raleway";
  font-size: 30px;
  font-weight: italic;
  font-color: #303030
}

.left {
  text-align: center;
}

.bottom {
  bottom: 0;
  background-color: #07B;
}

.body {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.nav-tabs.centered>li,
.nav-pills.centered>li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}

.nav-tabs.centered,
.nav-pills.centered {
  text-align: center;
}

.c3-chart-arcs-title {
  fill: black;
  font-size: 13px;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 6px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 6px 1px;
  transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}


/* Full height image header */

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("Images/views.jpg");
  min-height: 120%;
}

.button4 {
  background-color: white;
  color: black;
  border: 3px solid #e7e7e7;
}

.button4:hover {
  background-color: #e7e7e7;
}

.button4 {
  border-radius: 17px;
}

.button4:focus {
  background-color: #e7e7e7;
  outline: none;
}

<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<div class = "container" id = "header">
  <!-- Put the background picture here -->
  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  <h1 class = "w3-wide w3-center">ANALYSIS OF HIGH SCHOOLS' PERFORMANCE IN THE INITIAL PHASE OF THE GETI </h1>
  <div style = "line-height:77%;"> <br> <br> </div>

  <ul class = "nav nav-tabs centered">
    <li class = "active"> <a href = "#project" data-toggle = "tab">About the project     </a> </li>
    <li> <a href = "#students" data-toggle = "tab">Students' statistics     </a> </li>
    <li> <a href = "#hschool" data-toggle = "tab">High schools' statistics     </a> </li>
    <li> <a href = "#me" data-toggle = "tab">Who am I     </a> </li>
  </ul>

  <div class = "tab-content">

    <!-- Tab1: Project -->
    <div id = "project" class = "tab-pane fade in active w3-container w3-content w3-padding-32" style = "max-width:1050px">
      <h3 class = "w3-wide w3-center">ABOUT THE PROJECT </h3>
      <br>
      <p class = "w3-container" style = "margin: 0 05%">This webapp has been developed as part of my Bachelor's thesis to analyze the performance of the students in the initial phase of the GETI Degree (Industrial Technologies Engineering) and how their prior high school affects their results. </p>
    </div>

    <!-- Tab2: Students -->

    <div id = "students" class = "tab-pane fade w3-container w3-content w3-padding-16" style = "max-width:1050px">
      <br>
      <CENTER> <button class = "button button4" type = "button" onclick = "show('One');hide('Group');hide('Average');">Specific subject     </button>
        <button class = "button button4" type = "button" onclick = "hide('One');show('Group');hide('Average');">Group of subjects     </button>
        <button class = "button button4" type = "button" onclick = "hide('One');hide('Group');show('Average');">Average grade     </button>
        <CENTER>
          <div id = "One" style = "display: block;" class = "w3-wide w3-center">Statistics about a specific subject </div>
        </CENTER>
        <CENTER>
          <div id = "Group" style = "display: none;" class = "w3-wide w3-center">Statistics about a group of subjects </div>
        </CENTER>
        <CENTER>
          <div id = "Average" style = "display: none;" class = "w3-wide w3-center">Average grade </div>
        </CENTER>
    </div>

    <!-- Tab3: Hschool -->
    <div id = "hschool" class = "tab-pane fade w3-container w3-content w3-padding-32" style = "max-width:1050px">
      <h3 class = "w3-wide w3-center">HIGH SCHOOLS' STATISTICS </h3>
    </div>

    <!-- Tab4: Me -->
    <div id = "me" class = "tab-pane fade w3-container w3-content w3-padding-32" style = "max-width:1050px">
      <h3 class = "w3-wide w3-center">WHO AM I? </h3>
      <p class = "w3-container" style = "margin: 0 05%">I am an Industrial Technologies Engineering Student from ETSEIB University. I have developed this web-app as part of my Bachelor Thesis in Data Mining. </p>
      <h3 class = "w3-center">Contact information </h3>

      <div class = "w3-row-padding w3-center">

        <br>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <footer class = "w3-center w3-grey w3-padding-32">
    <p> &copy <a href = "https://etseib.upc.edu/ca" target = "_blank"> ETSEIB      
     </a> reserves the rights of all the displayed data | M </p>
    <div class = "w3-left-align w3-margin-left w3-small">
      <p>
        <br> &nbsp;&nbsp;&nbsp;Escola Tècnica Superior d'Enginyeria Industrial de Barcelona <br> &nbsp;&nbsp;&nbsp;Universitat Politècnica de Catalunya <br> &nbsp;&nbsp;&nbsp;Avda. Diagonal 647, 08028 Barcelona <br> &nbsp;&nbsp;&nbsp;Phone: +34 93 401
        66 15
      </p>
    </div>
  </footer>