HTML Aligning icons with logo

I'm having a bit of an issue where I can't get the icons to correctly align. If I remove the section for all the icons, the Logo & title align perfectly, however when adding the icons, it causes massive issues. Sorry if this is a silly question, html is new to me!

I'm using a base HTML5 template for the design elements: HTML5UP Editorial

HTML & CSS:

/* Header */
#header {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  border-bottom: solid 5px #f56a6a;
  padding: 6em 0 1em 0;
  position: relative; }
  #header > * {
    -moz-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0; }
  #header .logo {
    border-bottom: 0;
    color: inherit;
    font-family: "Roboto Slab", serif;
    font-size: 1.125em; }
  #header .icons {
    text-align: right; }
  @media screen and (max-width: 1680px) {
    #header {
      padding-top: 5em; } }
  @media screen and (max-width: 736px) {
    #header {
      padding-top: 6.5em; }
      #header .logo {
        font-size: 1.25em;
        margin: 0; }
      #header .icons {
        height: 5em;
        line-height: 5em;
        position: absolute;
        right: -0.5em;
        top: 0; } }
        
        

/* Icons */
ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0; }
  ul.icons li {
    display: inline-block;
    padding: 0 1em 0 0; }
    ul.icons li:last-child {
      padding-right: 0; }
    ul.icons li .icon {
      color: inherit; }
      ul.icons li .icon:before {
        font-size: 1.25em; }

<!-- Header -->
    <header id="header">

        <div>
        <a href="index.php" class="logo"><img style="vertical-align:middle; margin-right:0.5em;"; src="images/cat-logo.png"; alt=""; width="64"; height="64";/></a>
            <a class="logo"><strong> Oscat Pets</strong></a>
            
            <ul class="icons">
                <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
                <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
                <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
                <li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>
                <li><a href="#" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li>
            </ul>
        </div>
    </header>

Example of Current Broken Alignment

Example of how Alignment should look

Example of Header without icons being generated

Example of HTML Inspect

Solution

Hi thanks all for the feedback & advice! Turns out after about 6 hours of trying lots of different things, all that was missing was a simple statement for the ul class:

style="align-self: flex-end;"

Text is now being properly aligned although the base code has changed:

<!-- Header -->
<header id="header">
  <a href="index.php" class="logo"><img style="vertical-align:middle; margin-right:0.5em;" src="images/cat-logo.png" alt="" width="64" height="64" />
    <strong> Oscat Pets</strong></a>

  <ul class="icons" style="align-self: flex-end;">
    <li><a href="#" class="icon brands fa-facebook-f"><span class="label"; >Facebook</span></a></li>
    <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
    <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
    <li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>
    <li><a href="#" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li>
  </ul>
</header>

Ultimately, there was nothing wrong with the template, I had just used the wrong functions. Although Raxi's contributions will be taken into consideration, upon further manipulating the project!

Thanks to everyone supporting so quickly on my first post! I really appreciate this, and will be sure to engage fully on this site!