[solved] CSS problem div size and images

HTML-CSS
1

Hello there.

codepen: https://codepen.io/johnthecoder/pen/bOxOxK

I’m facing a little problem with my navbar. The background follow the h1 size and doesn’t care abour my social div with images.

Any tips to resolve this ?

HTML

<header>
    <div class="hero">
      <h1>John PA</h1>
      <div class="social">
      <img src="https://image.flaticon.com/icons/png/512/25/25231.png" alt="github">
      <img src="https://yt3.ggpht.com/a-/AAuE7mDMgJdxLr67xIch3lj0egc9RZXiZhMXIglFew=s900-mo-c-c0xffffffff-rj-k-no" alt="freecodecamp" style="border-radius: 50%">
      </div>
    </div>
 
  </header>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero {
  width: 100%;
  height: auto;
  padding: 10px;
  background: grey;
  display: flex;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0,0,0,0.25):
}

.hero h1 {
  font-size: 1em;
}

.social {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  width: 40vw;
}

.social img {
  width: 32px;
  height: 32px;
}
2

i think tags are prioritized over classes

3

Do you have any idea on how I could resolve this ?

4

i am not sure. You mean your background font-size follow the h1 font- size instead of following the social div with images ??

it’s not a font-size problem, it’s rather a font-family problem ?

5

That was my problem.

I used the display: flex to center the h1, now it works fine.