Why is my nav bar keep overlapping with my image when I adjust my screen size?

Code Feedback
1

My website looks good at first glance however, the nav bar (on the right) overlaps my logo when I adjust the screen display to be small. (I believe this occurs because of the logo size , position, and flexbox I’ve been struggling for 2 weeks and am not sure how to fix this problem yet) .

I tried implementing these values, but my logo and navbar keep going to the middle when I adjust the size of my logo,

.navbar {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
width: 250px;
height: auto;
cursor: pointer;
}

.navbar ul {
list-style: none;
text-align: right;
}

2

Hello!

As a quick fix you can reduce the font-size of navbar ui li to 0.5rem to 0.8rem (by preference).

However in the long run you will have to add a hamburger/ mobile menu for tablets or smaller. Or add a media query that puts the links on a lower line below the logo, not the best UX for smart phones though.