How to make bar responsive? [closed]

I'mtryingtomaketheiconsinthisHTML5videoplayerresponsive.

<divid="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 already used display: table and display:table-cell , display:inline-block . But I could not. The size of the video control bar is 850px . I need you to be responsive to that size only.

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

main is the parent of all, but does not have a css that interferes.