HTML Embed is disabling interations

Design help Custom code
1

I made some hover animation for my navbar but now they are not working because of a html embed on my page. The animations work in preview mode, but not on the published page. Any idea why this is happening?

The HTML embed is only in the “Events” page and only affects the navbar on that page.

This is the Embed

<style>
.collection-item:nth-child(even) {
  background-color: hsla(0, 2.22%, 91.18%, 1.00);
}
<style>

Published page: https://den-abne-scene-fyn-2.webflow.io/events

Here is my site Read-Only: https://preview.webflow.com/preview/den-abne-scene-fyn-2?utm_medium=preview_link&utm_source=designer&utm_content=den-abne-scene-fyn-2&preview=4780bebc8d08e2be6829960f600f0fab&pageId=60c635e055dc4922e75bc8b7&workflow=preview

2

You have opened your style block but have not closed it. You need to close it with </style> not <style>.