Childrens in flex container affecting their siblings

Question

I am attempting to align elements in my website by using flex, however, I'm running into an issue with the header where changing the size of an h1 is also changing the size for an image, even if I try to select specifically just the h1. Any property applied to the h1 is also "bleeding" into the image.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.header {
  display: flex;
  margin: 15px 20px 15px 15px;
}

.page-title {
  font-size: 50px;
}

<header class="header">
  <img src="https://placehold.it/50x50?text=LOGO" alt="Logo" srcset="" class="company-logo">
  <h1 class="page-title">Batch Documentation</h1>
</header>

I attempted to use .header:last-child as well but it didn't apply anything to the h1, but first-child did apply changes to the img.

I just want to have the h1 be a bit bigger without changing the size of the logo, and to add some margin/padding between the two.

Answer 1

set fixed height and width of image

.company-logo{
  height: 100px;
  width: 100px;
}