I tried to push myself not only follow along the video and copy the example code but try to implement by myself first. After my first try, I watched the video and studied the sample code to see what's the difference with mine and improve it. So my code structure is slightly different with the example.
There are a few issues I cannot solve (you can see the issues in the screenshot.): 1. The alignment of items in
.navbar
.navbar
: It works fine with
justify-content: flex-end;
justify-content: flex-end;
for the example code but it doesn's in mine. 2. The gap between the hamberger icon and the logo 3. The overlay conflict between the logo and the search bar
I reckon they are all related flex and media query concept. So I studied some related tutorial over hours but I still stuck here. Can anyone give me some guidance?