Why aren't my links working?

I went over everything for the product landing page I’m trying to create, but I still cant figure out why the links aren’t working smoothly. Here’s my codepen to look at my work.

What do you mean by “smoothly”?

Do you mean from the navbar links? A search for “html smooth scroll to anchor” yielded this as the top result, suggesting this:

html {
  scroll-behavior: smooth;

which worked great.

1 Like

If you’re talking about the classes link in your navbar…
You’ve no element with id classes on your page…

Plz explain why were the names of the desserts (with the price; at the end of the page) were overlapping each other. How to fix it.
It is showing as such in my PC.
I originally came to give answer but found this problem.

It’s because, the above page has following css:

line-height: 50%;

increase this line height on product-title to make the text look better