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
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!