Problems changing footer section widths

Hi Guys,

I'm having trouble adjusting the the widths of my footer sections.  Currently the footer is divided into three equal sections.  What I would like to do is have the footer sections sizes match the sidebar and main content area.  Left and right sidebars are 20%.  Leaving 60% for the main content area.  So I would like for the left and right footers to be 20% and the center footer to be 60%.  I've tried several different things and no joy,  Any help you can provide is appreciated.

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/full.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">
</head>
<body>
<header id="header" class="headerStyle"> logo
  <nav id="navigation" role="full-horizontal">
    <ul id="mainMenu">
      <li class="menuItem"><a href="#">Products</a></li>
      <li class="menuItem"><a href="#">Services</a></li>
      <li class="menuItem"><a href="#">Projects</a></li>
      <li class="menuItem"><a href="#">About</a></li>
      <li class="menuItem"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main id="pageBody">
  <div id="content" class="bodyStyle"> </div>
  <div id="leftSidebar" class="bodyStyle">
    <article class="topArticlestyle">
      <h3>First Left Article</h3>
    </article>
    <article class="middleArticlestyle">
      <h3>Second Left Article</h3>
    </article>
    <article class="bottomArticlestyle" >
      <h3>Third Left Article</h3>
    </article>
  </div>
  <div id="rightSidebar" class="bodyStyle">
    <article class="topArticlestyle">
      <h3>First Right Article</h3>
    </article>
    <article class="middleArticlestyle">
      <h3>Second Right Article</h3>
    </article>
    <article class="bottomArticlestyle">
      <h3>Third Right Article</h3>
    </article>
  </div>
</main>
<footer id="footer">
  <div id="leftFooter" class="footerStyle">
	  
  </div>
  <div id="centerFooter" class="footerStyle"> 
	  
  </div>
  <div id="rightFooter" class="footerStyle">
	  
  </div>
</footer>
</body>
</html>

    body {
      font-family: "Open Sans", "Arial";
      color: #FCF9F4;
      font-size: 1em;
      background-color: #3F3F3D;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    a {
      text-decoration: none;
      color: #FCF9F4;
    }
    #navigation[role="full-horizontal"] {
      width: 100%;
    }
    #navigation[role="full-horizontal"] #mainMenu {
      width: 100%;
      list-style: none;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem {
      position: relative;
      float: left;
      padding: .25em 1em;
      margin: 1.25em 1em;
      cursor: pointer;
      background: #3E6EB6;
      text-align: center;
      border-radius: .75em;
      transition-duration: .3s;
      transition-timing-function: ease-in-out;
      transition-property: background, color, padding, border-radius;
      box-shadow: 0.1em -0.1em 0 0.1em #FCF9F4, inset 0 0 0 0.15em #FCF9F4, -0.1em 0.1em 0 0.1em #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:after {
      position: absolute;
      z-index: -1;
      content: "";
      right: 0;
      border-radius: 50%;
      box-shadow: 1em 1em 0 2em #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:last-child:after {
      box-shadow: none;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:hover {
      background-color: #3E6EB6;
      padding-left: 3em;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem:hover > a {
      color: #FCF9F4;
    }
    #navigation[role="full-horizontal"] #mainMenu > .menuItem > a {
      color: #FCF9F4;
      text-decoration: none;
      font-size: 1.3em;
      transition: color .3s ease-in-out;
    }
    #leftSidebar {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 20%;
    }
    #content {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 60%;
    }
    #rightSidebar {
      display: flex;
      flex-wrap: wrap;
      flex-basis: 20%;
    }
    #footer {
      font-family: inherit;
      font-size: 1em;
      color: #FCF9F4;
    }
    .headerStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      margin: 5px;
    }
    .navigationStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      margin: 5px;
    }
    .bodyStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
    }
    .sideBarstyle {
      display: flex;
      flex-direction: column;
      order: 0;
      flex: none;
    }
    .articleStyle {
      flex: 1;
      justify-content: center;
      align-items: center;
      transition: flex 1500ms cubic-bezier(0.17, 0.67, 0, 1.45);
    }
    .Articlestyle:hover {
      flex: 4;
    }
    .topArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: start;
      flex-basis: 100%;
    }
    .middleArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: center;
      flex-basis: 100%;
    }
    .bottomArticlestyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      align-self: end;
      flex-basis: 100%;
    }
    .footerStyle {
      background-color: #3F3F3D;
      border: 5px solid #3E6EB6;
      border-radius: 5px;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
    }