Flex items are not lined up correctly

Question

I'm having a problem with a flex box I am trying to make. For some reason, one of the items in the flex box is displaying 2 or 3 pixels lower than all the other items, and I can't for the life of me figure out why or how to fix it. I've tried messing with the positioning of the different items, but either they all move and still don't align or none of them do.

Example of what i am seeing:

Example. This one has them off center the opposite direction.

header {
  background: #001021;
}

.logo {
  overflow: auto;
}

.logo h1 {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 2.42em;
  color: #7E7F9A;
  text-align: center;
  max-width: 90%;
}

.logo img {
  max-width: 100%;
  float: left;
  border: double;
  border-width: 5px;
  background-color: #372248;
}

.menu-bar span {
  background-color: #372248;
  padding: 2px 40px;
  border-top-style: double;
  border-bottom-style: double;
  font-size: 30px;
  position: relative;
  bottom: 0;
  margin: auto;
}

.menu-item {
  position: relative;
  bottom: -6px;
}

.menu-bar {
  /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: center;
  margin: auto;
}

<header>
  <section class="logo">
    <div class="logo-image">
      <img src="images/logo.png" alt="MA Logo">
    </div>
    <div class="title">
      <h1>Mystic Arms Campaign</h1>
    </div>
    <section class="menu-bar">
      <div class="sidebar-icon">
        <span style="cursor:pointer" onclick="openNav()">&#9776;</span>
      </div>
      <div class="menu-item">
        <span>Home</span>
      </div>
      <div class="menu-item">
        <span>About</span>
      </div>
      <div class="menu-item">
        <span>Documents</span>
      </div>
    </section>
  </section>
</header>

Answer 1

That HTML character(☱) have different line-height value than normal words in other spans and that why we see the displacement; fix it by setting line-height value on that element like this:

.menu-bar span {
    line-height: 1rem;
}

---

by the way I'd removed some unnecessary attribute from some css classes by adding a - before them so you can investigate them; and try more specific selectors instead of tag names.anyway check out the snippet below:

header {
        background: #001021;
  }
 .logo {
        overflow:auto;
  }
  
  .logo h1 {
        font-family: 'Cinzel Decorative', cursive;
        font-size: 2.42em;
        color: #7E7F9A;
        text-align: center;
        max-width: 90%;
        
   }
  
  .logo img {
        max-width: 100%;
        float: left;
        border: double;
        border-width: 5px;
        background-color: #372248;
   }
  .menu-bar span {
        background-color: #372248;
        padding: 2px 40px;
        border-top-style: double;
        border-bottom-style: double;
        font-size:30px;
        line-height:1rem;
        -position:relative;
        -bottom: 0;
        -margin: auto;
  }
  .menu-item {
        -position:relative;
        -bottom: -6px;
   }
  .menu-bar {
        /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
        display: flex;
        -justify-content: left;
        align-items: center;
        text-align: center;
        -margin: auto;
  }

<header>
	  <section class="logo">
	    <div class="logo-image">
	      <img src="images/logo.png" alt="MA Logo">
		</div>
		<div class="title">  
	      <h1>Mystic Arms Campaign</h1>
		</div>
		<section class="menu-bar">
		  <div class="sidebar-icon">
		    <span style="cursor:pointer" onclick="openNav()">&#9777;</span>
		  </div>
		  <div class="menu-item">
		    <span>Home</span>
		  </div>
		  <div class="menu-item">
		    <span>About</span>
		  </div>
		  <div class="menu-item">
		    <span>Documents</span>
		  </div>
		</section>
	  </section>
	</header>

Answer 2

There are two issues causing the problem.

First, you have the textual menu items offset with relative positioning.

.menu-item {
  position: relative;
  bottom: -2px;
}

This is throwing off the alignment.

Second, the menu bar, generated by an HTML entity in the first flex item, is being treated differently than text. You could see this by replacing it with letters (demo). This also throws off the alignment.

A simple solution would be to remove the relative positioning offset and set the flex container to align-items: baseline.

header {
  background: #001021;
}

/* .logo {
  overflow: auto;
} */

.logo h1 {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 2.42em;
  color: #7E7F9A;
  text-align: center;
  max-width: 90%;
  margin-top: 0; /* new */

}

.logo img {
  max-width: 100%;
  float: left;
  border: double;
  border-width: 5px;
  background-color: #372248;
}

.menu-bar span {
  background-color: orange; /* changed for demo */
  padding: 2px 40px;
  border-top-style: double;
  border-bottom-style: double;
  font-size: 30px;
  position: relative;
  bottom: 0;
  margin: auto;
}

/* .menu-item {
  position: relative;
  bottom: -6px;
}
*/

.menu-bar {
  /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
  display: flex;
  /* justify-content: left; */
  /* align-items: center; */
  text-align: center;
  margin: auto;
  align-items: baseline; /* new */
}

<header>
  <section class="logo">
    <div class="logo-image">
      <img src="images/logo.png" alt="MA Logo">
    </div>
    <div class="title">
      <h1>Mystic Arms Campaign</h1>
    </div>
    <section class="menu-bar">
      <div class="sidebar-icon">
        <span style="cursor:pointer" onclick="openNav()">&#9776;</span>
      </div>
      <div class="menu-item">
        <span>Home</span>
      </div>
      <div class="menu-item">
        <span>About</span>
      </div>
      <div class="menu-item">
        <span>Documents</span>
      </div>
    </section>
  </section>
</header>