How to fix display: flex if it's not working properly?

Question

css

I'm making a navigation menu, there was such a problem: display flex on the parent element does not distribute elements to the entire block. Here is the code:

HTML


LESS

.shop_slider {
    
    .top_title_line {
        min-height: 81px;
        background: linear-gradient(#ff6c22, #ff4616);
        display: flex;
        align-items: center;
        color: #fff;
        .fredoka_font();

        .shop_box_title {
            flex-grow: 1;
            text-align: center;
        }

        .left, .right {
            display: block;
            opacity: 50%;
        }
    }
}

css

.shop_slider .top_title_line {
  min-height: 81px;
  background: linear-gradient(#ff6c22, #ff4616);
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'Fredoka One', cursive;
}
.shop_slider .top_title_line .shop_box_title {
  flex-grow: 1;
  text-align: center;
}
.shop_slider .top_title_line .left,
.shop_slider .top_title_line .right {
  display: block;
  opacity: 50%;
}

JSFiddle - https://jsfiddle.net/2rc5k8z0/2/

Putting a display block on child elements doesn't help, nor does setting a width of 100% on the parent.

I want so:

Answer 1

Well, the flex in top_title_line only affects the single nested shop_slider_navigation tag - it does n't affect the tags inside shop_slider_navigation in any way.
And to distribute the blocks inside the shop_slider_navigation, you need display: flex; and set flex settings for shop_slider_navigation.
PS In the question editor there is an insert code button - with which you can insert both HTML and CSS normally. Making HTML an image doesn't make sense and only hinders the responders.

Answer 2

Wrap the left and right blocks in a wrapper and voila