Trouble putting three images side by side in header

[Edward Gestalt]

I'm having some issues putting three images, side by side in the header. (I created a lower header just for the pictures). 

First, once I added the images to the header, it pulled the upper and lower panel into the header and narrowed them.

Second, the images are not coming out the same height. I thought they would. Am I mistaken? Are they supposed to be the same height or size as each other? Or do I have to make all the images the same height before loading them?

The two smaller images in the header are actually much bigger than the center one, but they show up smaller.

This is the code I used.

<div id="header">
<div class="lower">
<div class="wrapper">
<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
  </div>
</div>

and

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

If you would like to take a look. Use Test User PW:MyBB!@34 Test Theme

https://theprosestylist.net/

Thank you for your time. It is appreciated.

[.m.]

on which theme you are trying to put the images below header ?

[Edward Gestalt]

on which theme you are trying to put the images below header ?

Test Theme

[.m.]

^ test named theme is not available for logged in users / guests

[Edward Gestalt]

^ test named theme is not available for logged in users / guests

My apologies. It should be available now.

[User 4384]

Hi,

I would change your HTML, and your CSS as this:

In the header  template of the Test theme, search for:

						<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
	  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
			  </div>
</div> 

And change it to:

<div class="row" style="height: 200px;display: flex;">
	<img src="images/wave3.png" alt="The Great Wave" style="max-width:33%;margin: 0 auto;">
	<img src="images/Goals.png" alt="Goals" style="max-width:33%;margin: 0 auto;">
	<img src="images/sky.png" alt="Sky" style="max-width:33%;margin: 0 auto;">
</div> 

Now it should work.

[Edward Gestalt]

Hi,

I would change your HTML, and your CSS as this:

In the header  template of the Test theme, search for:

						<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
	  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
			  </div>
</div> 

And change it to:

<div class="row" style="height: 200px;display: flex;">
	<img src="images/wave3.png" alt="The Great Wave" style="max-width:33%;margin: 0 auto;">
	<img src="images/Goals.png" alt="Goals" style="max-width:33%;margin: 0 auto;">
	<img src="images/sky.png" alt="Sky" style="max-width:33%;margin: 0 auto;">
</div> 

Now it should work.

Yes, it did. Thank you both.