Feedback on a Google-Landing page replication (HTML / CSS)

Hi everyone,

https://www.codecademy.com/workspaces/62a71cfdb0fe32e4008def40

This is my first “independent” project on codecademy. I tried to resample the google.de landing page using just HTML / CSS. There are certain points I am not sure about if I solved them well. Maybe somone can look over one or two of the following list.

  1. Icones in the upper right corner

#icon_waffle img{
position: relative;
** top: -12px;**
width: 40px;
}

#icon_profile img{
position: relative;
** top: -12px;**
width: 40px;
border-radius: 20px;
}

Isn’t there a smarter way to center those icons vertically without using a fix distance of 12px? Is it possible to center an inline-block element in relation to the surrounding ones?

  1. Spacer between the buttons
 <section class="section_buttons">
    <button id="button_search">Google Suche</button>
    <spacer></spacer>
    <button id="button_lucky">Auf gut Glück!</button>
  </section>

It somehow feels wrong to use a non-self-closing tag here and leaving it empty. If i ever need some kind of spacer between to elements, is this the right way? I defined the spacer’s width in CSS though.

And of course I am very happy about general suggestions on efficiency or if the code is comprehensible at all!? If not, please tell me. :slight_smile:

Thanks a lot!