CSS

I have a page that displays a gallery of images, using CSS Flexbox layout to display them:

Gallery is here

The page displays just fine in Chrome and Firefox, however, it displays improperly in Edge inasmuch as the images are too close together. I read something about justify-content: space-evenly not fully working in Edge, but I couldn't figure out any kind of workaround to fix the issue.

.gallery, .game {
    display: flex;
    flex-direction: row;

I have a css class setup for a button however I require all orange text and backgrounds to change on hover, can anyone help? asked in other forums but just got remarks on where i store the CSS, example is at https://teeseyed.online/testing/button.html

I have a CSS keyframe animation that uses a CSS variable as one of the animation properties. This variable is defined in jQuery. The entire animation seems to work fine in Chrome and Firefox. However, in Safari and on mobile browsers, only the portions of the animation not using the variable work correctly.

I've spent a lot of time trying to debug the issue. Some of the notable steps are listed...

Hi, I'm sorry to be such an amateur but I can't seem to get this figured out. It would seem inline styling should be able to do it. Here are the errors I get from the validator. Thank you very much if you can help:

Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
 
    From line 94, column 4; to line 94, column 31
 
    info">↩			<a class="mobile_user_menu">↩				<
 
    Contexts in which element a may be used:
        Where phrasing content is expected.
    Content model for element ul:

Hello- I am developing a site here: https://newcompassion.org/
(no SSL so please accept the risk ).

On mobile there are 2 social media icons in my dropdown. These have a CSS Class of hide-on-desktop1 and hide-on-desktop2.

I need them to be on the same line, is this possible?

Thank you

KimAnn