Setting up flex properly

Are there improvements, adjustments I can make to this section of code?

Is there a better way for it to be written?

This was originally a float code, I changed it to use flex.

I don’t know if the flex part can be improved better in the code
https://jsfiddle.net/zw2nkm7c/1/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.container-inner {
  display: flex;
  justify-content: space-between;
}

<div class="outer">
  <div class="tcell">
    <audio></audio>
    <div class="container ">
      <div class="container-top">
        <div>
          <div class="jacket-left">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap-left hide">
            <div class="video" data-id="jMAShwisnQI"></div>
          </div>
        </div>
        <div>
          <div class="jacket-right">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap-right hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
      </div>
      <div class="container-inner">
        <div class="container-left">
          <div class="playButton wrapa" data-audio="http://hi5.1980s.fm/;">
            <svg class="play" width="39" height="40" viewbox="5 8 50 56">
              <title>Play</title>
              <path class="custom-fill" d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" />
              <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z" />
              <path d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" />
            </svg>
            <svg class="pause hide" width="39" height="40" viewbox="0 -3.4 24 24">
              <title>Pause</title>
              <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63" />
              <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434" />
              <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751" />
              <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434" />
              <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751" />
              <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="jacketc">
            <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
              <title>Play</title>
              <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
              <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="wrapg hide">
            <div class="video" data-id="olhhsjFBpA4"></div>
            <div class="lines"></div>
          </div>
          <div class="jacketd" title="OPEN">
            <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
              <title>Open</title>
              <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="hide wraph">
            <ul class="nav">
              <li>
                <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                </div>
              </li>
              <li>
                <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                </div>
              </li>
              <li>
                <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                </div>
              </li>
              <li>
                <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingd" data-id="-Xgi_way56U"></div>
                </div>
              </li>
              <li>
                <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                </div>
              </li>
              <li>
                <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingf" data-id="YOw9J4K02H4"></div>
                </div>
              </li>
              <li>
                <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingg" data-id="ID856YDIb6A"></div>
                </div>
              </li>
              <li>
                <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingh" data-id="VRtMZDJdIIU"></div>
                </div>
              </li>
              <li>
                <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                  <title>Play</title>
                  <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                  <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                </svg>
                <div class="hide">
                  <div class="video playingi" data-id="qYEooPeyz5M"></div>
                </div>
              </li>
            </ul>
            <div class="linesa"></div>
            <div class="linesb"></div>
          </div>
        </div>
        <div>
          <div class="playButton wrapb" data-audio="http://213.239.206.179:8488/;">
            <div class="color"></div>
            <svg class="play" width="90" height="108" viewbox="0 -10 85 120">
              <title>Play</title>
              <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
            </svg>
            <svg class="pause hide" width="90" height="108" viewbox="-13 -10 85 120">
              <title>Pause</title>
              <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
            </svg>
            <svg aria-hidden="true" class="speaker hide" width="60" height="72" viewbox="0 0 16 14">
              <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill-rule="evenodd" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="wrapc">
            <div class="playButton svoefm" data-audio="http://getradio.me/svoefm">
              <svg class="play" width="12" height="14" viewbox="0 0 85 100">
                <title>Play</title>
                <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
              </svg>
              <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">
                <title>Pause</title>
                <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
              </svg>
            </div>
            <div class="playButton soundpark" data-audio="http://185.220.35.56:8000/320">
              <svg class="play" width="12" height="14" viewbox="0 0 85 100">
                <title>Play</title>
                <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
              </svg>
              <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">
                <title>Pause</title>
                <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
              </svg>
            </div>
            <div class="playButton rcm" data-audio="http://getradio.me/rcm">
              <svg class="play" width="12" height="14" viewbox="0 0 85 100">
                <title>Play</title>
                <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
              </svg>
              <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">
                <title>Pause</title>
                <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
              </svg>
            </div>
            <div class="lines"></div>
          </div>
          <div class="playButton wrapd" data-audio="http://hestia.cdnstream.com/1340_128?cb=204073.mp3">
            <svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
              <defs>
                <clipPath id="clip">
                  <path d="M0,0 0,194
                    260,194 260,0 0,0 M153, 95A23, 23 0 0 1 107 95A23, 23 0 0 1 153, 95" />
                </clipPath>
              </defs>
              <g clip-path="url(#clip)">
                <line x1="131" y1="40" x2="130" y2="149" />
                <line x1="91" y1="133" x2="170" y2="58" />
                <line x1="77" y1="95" x2="185" y2="96" />
                <line x1="169" y1="135" x2="93" y2="56" />
              </g>
              <circle class="outer" cx="131" cy="95" r="55" />
              <circle cx="130" cy="95.40" r="20.8" />
            </svg>
            <svg class="play" width="14" height="18" viewbox="0 0 1226 1481">
              <title>Play</title>
              <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" />
            </svg>
            <svg class="pause hide" width="14" height="18" viewbox="0 0 1260 1512">
              <title>Pause</title>
              <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="jacketb" title="OPEN">
            <svg class="linka" width="70" height="70" viewbox="0 0 40 40">
              <path d="M26.555,20.404c-1.893,0-3.667-0.731-4.995-2.06c-1.328-1.328-2.06-3.102-2.06-4.995   c0-1.893,0.732-3.667,2.06-4.995l4.858-4.791C27.749,2.231,29.522,1.5,31.416,1.5c1.893,0,3.667,0.731,4.995,2.06   c1.328,1.328,2.06,3.102,2.06,4.995c0,1.893-0.732,3.667-2.06,4.995l-4.858,4.791C30.222,19.672,28.448,20.404,26.555,20.404z    M31.445,4.5c-1.092,0-2.112,0.419-2.874,1.181l-4.858,4.792c-0.764,0.764-1.184,1.784-1.184,2.876s0.419,2.112,1.181,2.874   s1.782,1.181,2.874,1.181s2.112-0.419,2.874-1.181l4.858-4.792c0.764-0.764,1.184-1.785,1.184-2.876s-0.419-2.112-1.181-2.874   C33.557,4.919,32.537,4.5,31.445,4.5z" />
              <path class="linkb" d="M31.415,2c1.759,0,3.408,0.68,4.642,1.913c1.234,1.234,1.913,2.882,1.913,4.641   c0,1.759-0.68,3.408-1.909,4.637l-4.865,4.799c-1.234,1.234-2.882,1.913-4.642,1.913c-1.759,0-3.408-0.68-4.642-1.913   C20.68,16.756,20,15.108,20,13.349s0.68-3.408,1.909-4.637l4.865-4.799C28.008,2.68,29.656,2,31.415,2 M26.585,17.904   c1.225,0,2.371-0.471,3.223-1.323l4.865-4.799C35.528,10.926,36,9.78,36,8.555c0-1.225-0.471-2.371-1.328-3.227   C33.816,4.472,32.67,4,31.445,4c-1.225,0-2.371,0.471-3.222,1.323l-4.865,4.799c-0.856,0.856-1.328,2.002-1.328,3.227   c0,1.225,0.471,2.371,1.328,3.227C24.213,17.432,25.36,17.904,26.585,17.904 M31.415,1c-1.939,0-3.878,0.735-5.349,2.206L21.206,8   c-2.942,2.942-2.942,7.756,0,10.697c1.471,1.471,3.41,2.206,5.349,2.206c1.939,0,3.878-0.735,5.349-2.206l4.86-4.794   c2.942-2.942,2.942-7.756,0-10.697C35.293,1.735,33.354,1,31.415,1L31.415,1z M26.585,16.904c-0.958,0-1.853-0.367-2.52-1.035   c-0.667-0.667-1.035-1.562-1.035-2.52c0-0.958,0.367-1.853,1.035-2.52l4.86-4.794C29.592,5.367,30.487,5,31.445,5   c0.958,0,1.853,0.367,2.52,1.035C34.633,6.702,35,7.597,35,8.555s-0.367,1.853-1.035,2.52l-4.86,4.794   C28.438,16.536,27.542,16.904,26.585,16.904L26.585,16.904z" />
              <path d="M8.555,38.5c-1.893,0-3.667-0.731-4.995-2.06c-1.328-1.328-2.06-3.102-2.06-4.995   c0-1.893,0.732-3.667,2.06-4.995l4.89-4.89c1.328-1.329,3.102-2.06,4.995-2.06s3.667,0.731,4.995,2.06   c1.328,1.328,2.06,3.102,2.06,4.995c0,1.893-0.732,3.667-2.06,4.995l-4.89,4.89C12.222,37.769,10.448,38.5,8.555,38.5z    M13.475,22.5c-1.092,0-2.112,0.419-2.874,1.181l-4.89,4.89c-0.762,0.761-1.181,1.782-1.181,2.874s0.419,2.112,1.181,2.874   S7.493,35.5,8.584,35.5s2.112-0.419,2.874-1.181l4.89-4.89c0.762-0.761,1.181-1.782,1.181-2.874s-0.419-2.112-1.181-2.874   C15.587,22.919,14.566,22.5,13.475,22.5z" />
              <path class="linkb" d="M13.445,20c1.759,0,3.408,0.68,4.642,1.913C19.32,23.147,20,24.796,20,26.555 c0,1.759-0.68,3.408-1.913,4.642l-4.89,4.89C11.963,37.32,10.314,38,8.555,38c-1.759,0-3.408-0.68-4.642-1.913   C2.68,34.853,2,33.204,2,31.445s0.68-3.408,1.913-4.642l4.89-4.89C10.037,20.68,11.686,20,13.445,20 M8.585,36   c1.225,0,2.371-0.471,3.227-1.328l4.89-4.89c0.856-0.856,1.328-2.002,1.328-3.227c0-1.225-0.471-2.371-1.328-3.227   C15.846,22.471,14.7,22,13.475,22c-1.225,0-2.371,0.471-3.227,1.328l-4.89,4.89C4.501,29.074,4.03,30.22,4.03,31.445   c0,1.225,0.471,2.371,1.328,3.227C6.213,35.529,7.36,36,8.585,36 M13.445,19c-1.939,0-3.878,0.735-5.349,2.206l-4.89,4.89   c-2.942,2.942-2.942,7.756,0,10.697C4.677,38.265,6.616,39,8.555,39c1.939,0,3.878-0.735,5.349-2.206l4.89-4.89   c2.942-2.942,2.942-7.756,0-10.697C17.323,19.735,15.384,19,13.445,19L13.445,19z M8.585,35c-0.958,0-1.853-0.367-2.52-1.035   c-0.667-0.667-1.035-1.562-1.035-2.52c0-0.958,0.367-1.853,1.035-2.52l4.89-4.89C11.622,23.367,12.517,23,13.475,23   c0.958,0,1.853,0.367,2.52,1.035c0.667,0.667,1.035,1.562,1.035,2.52s-0.367,1.853-1.035,2.52l-4.89,4.89   C10.438,34.633,9.542,35,8.585,35L8.585,35z" />
              <path d="M14.879,26.5c-0.491,0-0.928-0.243-1.2-0.667c-0.348-0.541-0.23-1.303,0.278-1.812l10.029-10.029   c0.301-0.301,0.711-0.474,1.124-0.474c0.284,0,0.549,0.083,0.769,0.242c0.346,0.25,0.555,0.619,0.587,1.037   c0.033,0.412-0.116,0.816-0.408,1.108L15.876,26.087C15.609,26.354,15.255,26.5,14.879,26.5z" />
              <path class="linkb" d="M25.11,14.018L25.11,14.018c0.18,0,0.34,0.05,0.475,0.147c0.304,0.22,0.37,0.515,0.383,0.671   c0.021,0.266-0.075,0.527-0.264,0.715L15.522,25.734C15.35,25.905,15.122,26,14.88,26c-0.317,0-0.601-0.159-0.78-0.437   c-0.218-0.34-0.127-0.85,0.211-1.188L24.34,14.345C24.545,14.14,24.833,14.018,25.11,14.018 M25.11,13.018   c-0.537,0-1.079,0.222-1.477,0.62L13.604,23.667c-0.644,0.644-0.837,1.669-0.345,2.436C13.642,26.701,14.261,27,14.88,27   c0.488,0,0.977-0.186,1.35-0.559l10.182-10.182c0.819-0.818,0.739-2.195-0.24-2.904C25.854,13.125,25.483,13.018,25.11,13.018 L25.11,13.018z" />
            </svg>
            <div class="lines"></div>
          </div>
          <div class="wrape hide">
            <ul class="nav">
              <li><a href="http://www.reuters.tv/" target="_blank" title="Reuters TV"></a></li>
              <li><a href="https://www.youtube.com/user/NewsyHub/videos" target="_blank" title="Newsy"></a></li>
              <li><a href="https://www.youtube.com/user/voxdotcom/videos" target="_blank" title="Vox"></a></li>
              <li><a href="" target="_blank" title="Google Documents"></a></li>
              <li><a href="" target="_blank" title="Radio Gadget"></a></li>
              <li><a href="" target="_blank" title=""></a></li>
              <li><a href="http://hi5.1980s.fm/played.html" target="_blank" title="1980s.fm: Last Played"></a></li>
              <li><a> Audio Player</a></li>
              <li><a href="http://213.239.206.179:8488/played.html?sid=1" target="_blank" title="Blu Blu Lounge: Last Played "></a></li>
              <li><a href="https://www.radiobells.com/playlist/svoefm/" target="_blank" title="СВОЕFM: Last Played"></a></li>
              <li><a href="https://www.radiobells.com/playlist/soundparkdeep/" target="_blank" title="SOUNDPARK DEEP: Last Played"></a></li>
              <li><a href="http://s5.onweb.gr:8488/played.html" target="_blank" title="Cavo Paradiso: Last Played"></a></li>
              <li><a href="https://onlineradiobox.com/us/retrohitmix/playlist/?cs=us.retrohitmix" target="_blank" title="Retro Hit Mix: Last Played"></a></li>
              <li><a href="https://www.radiobells.com/playlist/rockfm90/" target="_blank" title="ROCK FM 90s: Last Played"></a></li>
              <li>
                <a href="http://46.105.118.14:15500/played.html" target="_blank" title="BeMy80s: Last Played"></a>
              </li>
            </ul>
            <div class="playButton" data-audio="http://jfm1.hostingradio.ru:14536/rock90.mp3">
              <svg class="play" width="38" height="40" viewbox="0 0 85 100">
                <title>Play</title>
                <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
              </svg>
              <svg class="pause hide" width="36" height="40" viewbox="0 0 60 100">
                <title>Pause</title>
                <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
              </svg>
            </div>
          </div>
          <div class="playButton wrapf" data-audio="http://46.105.118.14:15500/;">
            <div class="lines"></div>
            <svg aria-hidden="true" class="stack" width="260" height="245" viewbox="0 0 260 245">
              <line x1="4" x2="29" y1="122" y2="122" />
              <line x1="38" x2="108" y1="122" y2="122" />
              <line x1="83" x2="188" y1="91" y2="151" />
              <line x1="135" x2="135" y1="61" y2="182" />
              <line x1="82" x2="187" y1="152" y2="91" />
              <line x1="148" x2="183" y1="98" y2="38" />
              <line x1="187" x2="199" y1="31" y2="9" />
              <line x1="148" x2="183" y1="145" y2="205" />
              <line x1="188" x2="200" y1="213" y2="233" />
              <circle cx="134.80" cy="121.50" r="24.40" />
            </svg>
            <svg class="play" width="16" height="20" viewbox="0 0 1226 1481">
              <title>Play</title>
              <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" />
            </svg>
            <svg class="pause hide" width="16" height="20" viewbox="0 0 1260 1512">
              <title>Pause</title>
              <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What’s the HTML structure?

I just included it in the post.

based on that code, it would be more compact to declare it as

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container > div {
  display: flex;
  justify-content: space-between;
}

.container-top {
  align-items: center;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

(because the only two containers inside your container both are flexed and justified, it’s redundant to list it in container-top)

Setting it up like this would work too.
https://jsfiddle.net/a2htz3w9/1/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  align-items: center;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.container .container-top,
.container-inner {
  display: flex;
  justify-content: space-between;
}

.container .container-top is unnecessary unless you’ve got other .container-top's in the html

1 Like

Those two video boxes in the top header fall apart if I change it to this.

Removing both :
.container .container-top

https://jsfiddle.net/p5sfvdeg/3/

.container-inner {
  display: flex;
  justify-content: space-between;
}

Nono, i mean .container-top, is sufficient, you dont need to say .container .container-top, because there are no other .container-top’s in the code.

The whole code falls apart when it is set up like this.
https://jsfiddle.net/wer4k2g3/2/

.container-top {
  display: flex;
  justify-content: space-between;
}

this is also not what i was saying. Take your code in post 5. And in the last set, destroy the “.container”.

1 Like

Like this is what you meant.
That’s better.

https://jsfiddle.net/q8cayvL2/1/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  align-items: center;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.container-top,
.container-inner {
  display: flex;
  justify-content: space-between;
}