Align content in a header using flex display - css

Question

I'm really confused with flex display and I'm hoping someone can help.
I am trying to recreate this site https://jsbin.com/vafexudini/edit?html,css
I need some content all the way on the left (section-a), some in the middle(section-b) and some all the way on the right (section-c).
section-a seems to be in the right place but I can't get the content in middle and all the way right.
.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>

Answer 1

you could Also use flex & justify-content for section-a and -c .
flex can also be used for -b.
flex-wrap could also help here .
align-items instead position + top might also be usefull.
A min-height could be safer than height(or not depending of else content/design)
flex:1 for a & c was a good choice in my opinion.
example
.container-1 {
display: flex;
max-width: 100%;
background-color: #F7F7F7;
min-height: 60px;
border-top: 1px solid #C1C1C1;
border-bottom: 2px solid #C1C1C1;
align-items:center;
}
.section-a, .section-c {
flex: 1;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
}
.section-a span.file {
margin-right: 15px;
}
#image {
float: left;
margin-right: 10px;
position: relative;
bottom: 7px;
}
/*section-b*/
.section-b {
display:flex;
flex-wrap:nowrap;
}
.section-b span {
border: 2px solid #C1C1C1;
padding: 7px;
}
.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 {
justify-content:flex-end;
}
.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>

Answer 2

Add justify-content: space-between; to the container, delete all the flex parameters from the child elements and delete that one negative margin you have in there:
.container-1 {
display: flex;
justify-content: space-between;
max-width: 100%;
background-color: #F7F7F7;
height: 60px;
border-top: 1px solid #C1C1C1;
border-bottom: 2px solid #C1C1C1;
}
/*section-a*/
.section-a {
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 {
position: relative;
top: 20px;
justify-content: center;
}
.section-b span {
border: 2px solid #C1C1C1;
padding: 7px;
}
.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 {
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>