[solved] CSS problem div size and images

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 ?


    <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%">


* {
  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;

i think tags are prioritized over classes

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

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 ?

That was my problem.

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