Горизонтальное меню с графическими разделителями на всю ширину сайта

Question

Начал верстать макет . Не получается сделать меню с разделителями, которые заданы картинкой. Меню должно быть на всю ширину экрана, а разделитель находится точно по середине между пунктами меню. При сужении экрана разделитель должен все равно находится посередине между пунктами меню. Как сделано сейчас:

.main-header .container-fluid {
    background-color: rgba(242, 242, 242, 0.2); 
}

.main-header .menu {
    display: table;    
    width: 100%;
    font-family: Lato-Regular;
    font-size: 16px;
    line-height: 1.2;   
    text-transform: uppercase;
    justify-content: center;    
        
}

.main-header .menu a{
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;        
}

.main-header .menu a:hover{
    text-decoration: underline;
    text-decoration-color: #ff9fba;
}

.main-header .menu a::after {
    content: url(../img/figure.png);
    position: absolute; 
    right: 5%;
    
                
}

.main-header .menu span:last-child a::after {
    content: '';
}

<div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-none d-md-block">              
                    <div class="container">                     
                      
<nav class="menu">
                          
<a class="nav-link" href="#">Каталог цветов</a>
<a class="nav-link" href="#">О компании</a>                          
<a class="nav-link" href="#">Акция</a>                             
<a class="nav-link" href="#">Отзывы</a>                         
<span><a class="nav-link" href="#">Контакты</a><span>
                                                          </nav>
                        
                    </div>                      
                </div>              
            </div>
        </div>
    </div>

Answer 1

Вставьте разделители как отдельные элементы между пунктами меню, на том же уровне. display:flex и justify-content:space-between контейнеру (.main-header .menu).

Answer 2

Например такой вариант

body {
  display: block;
  width: 100%;
  min-height: 100vh;
  background: url('//i.imgur.com/0JIXgnO.png') no-repeat center center / cover;
  margin: 0;
}

.menu {
  display: block;
  background: rgba(242,242,242,.2);
  width: 100%;
}

.menu > nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2em;
  box-sizing: border-box;
}

.menu > nav > a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  padding: .5em;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.menu > nav > a:first-child {padding-left: 0;}
.menu > nav > a:last-child {padding-right: 0;}

.menu > nav > a:not(:last-child)::after {
  content: '◆';
  display: inline-block;
  position: absolute;
  left: 100%;
  transform: translateX(-50%);
}

<div class="menu">
  <nav>
    <a href="#">Каталог цветов</a>
    <a href="#">О компании</a>
    <a href="#">Акция</a>
    <a href="#">Отзывы</a>
    <a href="#">Контакты</a>
  </nav>
</div>

БЛОГ НА HUSL

Горизонтальное меню с графическими разделителями на всю ширину сайта

Ответы (2 шт):