How i can use min and max CSS functions to work with auto-CodePudding

I want to be able to use the common margin: auto property, but with a minimum margin, such as:

margin: 0 max(auto, 16px);

This would center an element horizontally & still enforce 16px of margin on either side when the viewport is too small. but not worked min() and max() CSS with margin: auto;

for example: I want to set style margin-left: 30px; and margin-right: 30px; for .navbar__menu when screen lower 500px. (without use @media query)

.navbar__menu{
            max-width: 500px;
            height: 50px;
            position: absolute;
            top: 100px;
            left:0;
            right:0;
            margin-left: auto;
            margin-right: auto;
            background: red;
            display: flex;
}

<div >
         
</div>

CodePudding user response：

Use margin-inline: max(30px,50% - 500px/2) and no need to set a max-width (more detail: https://twitter.com/ChallengesCss/status/1469270181205749771)

.navbar__menu {
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-inline: max(30px,50% - 500px/2);
  background: red;
  display: flex;
}

<div >

</div>