Align Multiple images horizontally in header with text centered underneath

Issue

Good evening folks!

Pulling my hair out and it's going to be something I've overthought...

So my right side of the header needs to have 2 images with text centered underneath running horizontally. I can't seem to get it to display correctly so have obviously done a boo boo somewhere.

Trying to get this:

HTML:

<div class="container">
    <div class="header">
            <img src="siteImages/siteLogo.png">
        <div class="header-center">
            <div class="headerLinks">
                <a class="active" href="#home">HOME</a>
                <a href="#contact">GAS &amp; CENTRAL HEATING</a>
                <a href="#about">SWIMMING POOLS</a>
                <a href="#about">AIR CONDITIONING</a>
                <a href="#about">SWIMMING POOLS</a>
            </div>
            <div class="socials">
                  <a href="https://www.facebook.com/#LINK"><img src="siteImages/faceBook.png"></a>
                  <a href="https://www.instagram.com/#LINK/"><img src="siteImages/instagram.jpg"></a>
                  <a href="https://www.tiktok.com/@#LINK"><img src="siteImages/tiktok.png"></a>
              </div>
        </div>
        <div class="header-right">
            <div class="contactIcons">
                <img src="siteImages/whatsApp.jpg">
                <span class="contactText">WhatsApp - Changed</span>
            </div>
            <div class="contactIcons">
                <img src="siteImages/telePhone.jpg">
                <span class="contactText">#TELE - Changed</span>
            </div>
        </div>
    </div>
</div>

CSS:

body{
    background: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    margin: 0px;
    width: 100%;
    height: 100%;
}
.container .headerMain{
    
}
.headerMain .HeaderLogo{
    
}
.headerMain .HeaderLinks{
    
}
.headerMain .HeaderContact{
    
}
/*HEADER SECTION */
.header {
    overflow: hidden;
    background-color: black;
    padding: 10px 10px;
}

/* Style the header links */
.headerLinks a {
    float: left;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 22px;
    line-height: 25px;
    border-radius: 4px;
    margin-top: 35px;
}

.header a.logo {
    font-size: 25px;
    font-weight: bold;
    max-width:150px;
    max-height:150px;
}
.header img{
    float: left;
    max-width:150px;
    max-height:150px;
}

.header-center {
    float: left;
    margin:0px;
    padding:0px;
}
.headerLinks{
    margin-left:20px;
    margin-bottom:0px;
    padding: 0px;
}
.headerLinks a:hover {
    background-color: #13628d;
    color: white;
}

.headerLinks a.active {
    background-color: #13628d;
    color: white;
}
.socials{
    float: right;
    margin:0px;
    padding: 0px 0px 0px 15px;
}

.socials img{
    float:right;
    max-width:40px;
    max-height:40px;
    padding: 0px 0px 0px 15px;
}
.socials a:hover{
    padding: 0px;
}

.header-right {
    float: right;
    display: flex;
    justify-content: center;
    width: 400px;
}
.contactHeader{
    font-size: 22px;
    color: #13628d;
    width: 300px;
}
.contactIcons {
    display: inline-block;
    text-align: center;
    width: 50%;
    vertical-align: top; 
}
.contactIcons img {
    max-width: 75px;
    max-height: 75px;
    margin: 0 auto;
}
.contactIcons .contactText {
   font-size: 20px;
   color: #13628d;
}

Any help would be greatly appreciated!

Solution

Yeah, that’s a mess. You don’t want floats, you need flexboxes.

body {
  font-family: sans-serif;
  margin: 0;
}

header {
  overflow: hidden;
  background-color: black;
  padding: 10px;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  align-items: center;
}

nav a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  border-radius: 4px;
  padding: 5px 10px;
}

nav a:hover, nav a:active {
  background-color: #13628d;
}

.socials {
  margin-top: 1em;
  text-align: center;
}

.header-right {
  display: flex;
  gap: 1em;
}

.contactIcons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.contactIcons .contactText {
   font-size: 20px;
   color: #13628d;
   text-align: center;
}

<header>
  <img src="http://picsum.photos/30">
  <div class="header-center">
    <nav>
      <a class="active" href="#home">HOME</a>
      <a href="#contact">GAS &amp; CENTRAL HEATING</a>
      <a href="#about">SWIMMING POOLS</a>
      <a href="#about">AIR CONDITIONING</a>
      <a href="#about">SWIMMING POOLS</a>
    </nav>
    <div class="socials">
      <a href=""><img src="http://picsum.photos/30"></a>
      <a href=""><img src="http://picsum.photos/30"></a>
      <a href=""><img src="http://picsum.photos/30"></a>
    </div>
  </div>
  <div class="header-right">
    <div class="contactIcons">
      <img src="http://picsum.photos/30">
      <span class="contactText">WhatsApp - Changed</span>
    </div>
    <div class="contactIcons">
      <img src="http://picsum.photos/30">
      <span class="contactText">#TELE - Changed</span>
    </div>
  </div>
</header>

After you run this snippet, make sure you use the full page link to see the full effect.

Answered By - Brett Donald