我的頁面想實現(xiàn)一行放四個書籍封面，每個封面寬度固定，如果縮放瀏覽器，間距隨之縮小。
我現(xiàn)在問題是，不知道怎么讓間距能根據(jù)瀏覽器寬度自適應。另外，希望整體最左和最右是沒有邊距的。
請教一下大家思路。

我的代碼：

<div class="four_cover">
       <div class="row">
        <div class="cover">
          <img src="../images/book2.jpg" alt="斷代">
          <h3 class="title">斷代</h3>
          <p class="author_small">郭強生</p>
        </div>
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book3.jpg" alt="觀山海">
          <h3 class="title">觀山海</h3>
          <p class="author_small">杉澤 / 梁超</p>
        </div>  
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book4.jpg" alt="魚翅與花椒">
          <h3 class="title">魚翅與花椒</h3>
          <p class="author_small">[英] 扶霞·鄧洛普</p>
        </div>  
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book5.jpg" alt="大雪將至">
          <h3 class="title">大雪將至</h3>
          <p class="author_small">[奧地利]羅伯特?澤塔勒</p>
        </div>  
       </div>
      </div>

css：

.four_cover {
    margin: 0 20px 0 20px;
}


.row {
    width: 100%;
    box-sizing: border-box;
    display: inline;


    .cover {
      float: left;
      width: 200px;
      height: 290px;
      
      box-shadow: 0px 4px 12px 0px rgba(0,0,0,.1);
      margin: 0 114px 0 0;

  


      img { 
          width: 100%;
          height: 100%;
          border-radius: .5rem 0 0 .5rem; 
          

      }
      .title {
          font-size: 1.25rem;
          font-weight: 500;
          margin: 1rem 0 0 0;
          line-height: 1.875rem;

      }
      .author_small {
        font-size: 0.875rem;
        color: $T3;
        line-height: 1.675rem;
        margin: 0;
      }

    }
    
}
}