I’m starting to switch from physical properties like margin-left and margin-right to using CSS Logical Properties like margin-inline-start and margin-block-end on my sites. Learn about them on @MozDevNet. Support is good.

Here's my first use on a:

.menu-people {
    display: flex;
    flex-direction: column;
    list-style: none;

    @media screen and (min-width: 30em) {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.menu-people li {

    @media screen and (min-width: 30em) {
        margin-inline-end: 1em;
    }
}