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" ><img style="vertical-align:middle; margin-right:0.5em;"; src="images/cat-logo.png"; alt=""; width="64"; height="64";/></a>
            <a ><strong> Oscat Pets</strong></a>
            
            <ul >
                <li><a href="#" ><span >Facebook</span></a></li>
                <li><a href="#" ><span >Twitter</span></a></li>
                <li><a href="#" ><span >Instagram</span></a></li>
                <li><a href="#" ><span >Snapchat</span></a></li>
                <li><a href="#" ><span >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

CodePudding user response：

Try using position: relative instead of position: absolute. For further understanding you could try refer this page.

#header .icons {
        height: 5em;
        line-height: 5em;
        position: relative;
        right: -0.5em;
        top: 0; } }

CodePudding user response：

You have to add below code to your css to get it working.

#header > div {
    display: flex;
    align-items: center;
}
#header > div > ul.icons {
    margin-left: auto;
}

CodePudding user response：

Try the following. I separate into two div and float the logo div to left

<style>
/* 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: 0;
  }
  #header .logo {
    font-size: 1.25em;
    margin: 0;
    border: 0;
  }
  #header .icons {
    height: 5em;
    line-height: 5em;
    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;
}


</style>

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

  <div style="float: left;">
    <a href="index.php" ><img style="vertical-align:middle; margin-right:0.5em;" ; src="images/cat-logo.png" ; alt="" ; width="64" ; height="64" ;/></a>
    <a ><strong> Oscat Pets</strong></a>
  </div>
  <div>
    <ul >
      <li><a href="#" ><span >Facebook</span></a></li>
      <li><a href="#" ><span >Twitter</span></a></li>
      <li><a href="#" ><span >Instagram</span></a></li>
      <li><a href="#" ><span >Snapchat</span></a></li>
      <li><a href="#" ><span >Medium</span></a></li>
    </ul>
  </div>
</header>