Re-sizing image resizes entire nav-bar & links

Question

1. I'm writing simple HTML & CSS & JS code,

   I've trying to create a responsive nav-bar with my logo as a link for the home page - however,
   when the navbar height is ideal (at 2-3rem) the image is far too small,
   

   I've tried adjusting the padding and margins but I can not enlarge the image without enlarging the rest of my assets in the nav-bar.

   [2rem nav-bar with small image][1] [HTML Code][2] [CSS Code][3] [Image at ideal size, links & nav bar too big][4]

   [1]: https://i.stack.imgur.com/5nnBc.png [2]: https://i.stack.imgur.com/eBgbj.png [3]: https://i.stack.imgur.com/dkcrj.png [4]: https://i.stack.imgur.com/iUj7m.png

   Any help would be greatly appreciated

Answer 1

make your nav-bar like this: .nav-bar:min-height:10vh; before this make sure to remove all the padding and margin and set the box-sizing to border box: *{margin:0; padding:0; box-sizing:border-box;}