Button texts won't allign with each other

I am a .Net Developer and was wondering if any of you awesome folks have done anything with Blazor
Should it all be grid?

RESPONSIVE Feedback page
responsive feedback page
RWD not working on iOS

How to make the following div responsive?

pattern attribute not working in Chrome and Edge but works fine in Firefox
<input id="email" type="email" name="email" placeholder="email@company.com" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}">
I can write "email@t" in the input and still submit the form while using Chrome or Edge. But when i use firefox the pattern works just fine so the input is invalid if i just write "email@t"...HOver effect on image
How do fill up vertical remaining space?

react-select: Preventing auto-closing (closeMenuOnSelect={false} ) when option clicked

scss compile
Grid in Chrome vs Firefox

Overlay catches click when clicking the modal
e.target is logical). The modal is a child of the Overlay.
When one or more items are added in the datalist, even without adding any additional event handlers, it makes clicks inside the modal register as if the overlay was clicked (e.target === e.currentTarget). I'm out of options since I cannot distinguish anymore what is actually clicked.
Even adding a click handler on the Modal with e.stopPropagation() doesn't help, because it doesn't register as the modal being clicked at all. I've tried Z-index as well. This bevior is the same in FireFox and Safari....how to make this text changing effect

Need help with the layout problem. the content of the main section is going below the sidebar.

Stacking Context behavior

How to scroll to section when it have image with dynamic height?
Style elements between two headings
CSS Animation changing the background with many images