HTML menu markup position - html

Question

I cannot understand how, in my case, possible to properly positioned the menu by creating only one class menu, instead of menu_left and menu_right classes.
How can I optimize css here?
Here's code example:
html:
<div class="menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>
Menu Image
css
.menu_left {
background: rgba(0, 0, 0, 0.85);
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: left;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
.menu_right{
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: right;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
}

Answer 1

Try it with Flexbox
See flexbox menu here
HTML
<div class="menu">
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
<div class="img"> <!-- replace div with the <img src="" alt="" /> tag -->
img here
</div>
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
</div>
CSS
.menu {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
background: #ddd;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
a {
padding: 5px 10px;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
.img {
width: 200px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
color: #fff;
}

Answer 2

To optimize CSS when using very similar settings, use three classes instead of two: One common class for both elements which contains all the common settings, and two separate classes for the two elements which contain the different settings:
CSS:
.menu_all {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
}
.menu_left {
background: rgba(0, 0, 0, 0.85);
float: left;
}
.menu_right{
float: right;
}
and HTML:
<div class="menu_all menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_all menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>