아래 코드에서 

.player-main {

  display : flex;

  flex-direction : row;

  justify-content : flex-start;

  align-items : center;


이렇게 값을 주면  .info와 .controls .time 이 가로로 정렬되야되는거 아닌가요...


도움 부탁드립니다.. 



<!DOCTYPE html>

<html lang="ko">

<head>

  <meta charset="utf-8">

  <title>Codeit Music</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="player">

    <div class="progress-bar">

      <div class="progress"></div>

    </div>

    <div class="player-main">

      <div class="info">

        <img class="current" src="" alt="현재 재생 중인 곡">

        <div class="title">After Sunset</div>

        <div class="artist">Benjamin</div>

      </div>

      <div class="controls">

        <img src="" alt="이전 곡" width="48" height="48">

        <img src="" alt="일시정지" width="48" height="48">

        <img src="" alt="다음 곡" width="48" height="48">

      </div>

      <div class="time">

        2:34 / 5:67

      </div>

    </div>

  </div>

</body>

</html>



----------여기부터 css-----------------


* {

  box-sizing: border-box;

}


html {

  font-family: Pretendard, sans-serif;

  word-break: keep-all;

}


body {

  margin: 0;

  background-color: #000;

  color: #fff;

  font-size: 16px;

  line-height: 24px;

}


.progress-bar {

  height: 6px;

  background: linear-gradient(0deg, #4d4d54, #4d4d54),

    linear-gradient(0deg, #4d4d54, #4d4d54), #4d4d54;

}


.progress {

  width: 70%;

  height: 100%;

  background-color: #7000ff;

}


}

.player-main {

  display : flex;

  flex-direction : row;

  justify-content : flex-start;

  align-items : center;

  padding: 16px 40px;

  background-color: rgba(48, 48, 55, 0.7);


  backdrop-filter: blur(15px);

}


.info,

.time {

}


.info {


}


.current {

  border-radius: 14px;

}


.title {

  color: #d9d9d9;

}


.artist {

  color: #8c8993;

}


.playing {

  width: 48px;

  height: 48px;

}


.icon {

  width: 24px;

  height: 24px;

}


.controls {

}


.time {

  color: #8c8993;

}