How do bar get responsive?

Question

I’m trying to make this HTML5 video player icons responsive.

      <div id="video-controls">
            <div class="play-video">
                {!! Html::image('img/video/play.png', 'Play / Pause Video', ['class' => 'play-pause']) !!}
            </div>
            <div class="progress">
                <span class="progress-bar"></span>
            </div>
            <div class="mute-video">
                {!! Html::image('img/video/mute.png', 'Mudo', ['class' => 'mute']) !!}
            </div>
            <div class="volume">
                <span class="volume-bar"></span>
            </div>
            <div class="setting-video">
                {!! Html::image('img/video/settings.png', 'Opções', ['class' => 'settings']) !!}
            </div>
            <div class="full">
                {!! Html::image('img/video/full-screen.png', 'Tela Cheia', ['class' => 'full-screen']) !!}
            </div>
        </div>

• CSS

      .video{
          position: relative;
          width: 100%;
          max-width: 873px;
          margin: auto;
  
          #video-controls{
              position: absolute;
              background-color: #eff2f6;
              width: 98%;
              max-width: 850px;
              margin: auto;
              left: 0;
              right: 0;
              bottom: 3px;
              line-height: 18px;
              height: 18px;
              opacity: 1;
              text-align: center;
              transition: all 0.35s ease;
              display: table-cell;
  
              div{
                  display: inline-block;
                  max-width: 100%/6;
              }
          }
     }
  

I’ve used display: table and display:table-cell, display:inline-block. But I couldn’t. The size of the video control bar is 850px. I need you to stay responsive up to that size.

I tried to use width: 100% and max-width, and nothing.

The main is everyone’s father, but doesn’t have a css interfering.