फ्लेक्स डिस्प्ले का उपयोग करके हेडर में सामग्री को संरेखित करें

.container-1 {
  display: flex;
  max-width: 100%;
  background-color: #F7F7F7;
  height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
}


/*section-a*/

.section-a {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  flex: 2;
  position: relative;
  top: 20px;
  justify-content: center;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
  margin-right: -7px;
  justify-content: center;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}

<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>