【HTML,CSS】background-colorのwidthが画面いっぱいに表示されない

画面を縮めるとbackground-colorが画面いっぱいに表示されません。
画面サイズを狭めるとbodyの横の縮尺が徐々に狭まっていく状態です。
width100%にしても効きませんでした。原因はなんなのでしょうか。

HTML

<body>

<div class="tabWrapper">
  <ul class="tab">
    <li class="active">
      <p>Tab1</p>
    </li>
    <li>
      <p>Tab2</p>
    </li>
    <li>
      <p>Tab3</p>
    </li>
  </ul>

  <div class="tabNav">
    <div class="tabPanel">
      <p>tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示tab1を表示</p>
    </div>
    <div class="tabPanel">
      <p>tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示tab2を表示</p>
    </div>
    <div class="tabPanel">
      <p>tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示tab3を表示</p>
    </div>
  </div>
</div>
</body>

CSS


body { 
  background-color: rgb(206, 206, 87);
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

.tabWrapper {
  position: relative;
  width: 680px;
  height: 560px;
  margin: auto;
  padding: 202px 0 262px ;
}

.tab {
  font-size: 30px;
  border-bottom: 10px solid #3a9eac;
  display: flex;
  justify-content: center;
}

.tab li {
  width: 200px;
  height: 65px;
  border-radius: 10px  10px 0 0;
  background-color: #e6c8c8;
}

.tab li p {
  width: 46px;
  height: 20px;
  font-size: 20px;
  margin: 20px auto 25px auto;
  color: #fff;
  line-height: 20px;
}

.tab li+li {
  margin-left: 24px;
}

.tabNav {
  position: relative;
}

.tabNav .tabPanel.show {
  display: block;
  background-color: #fff;
  height: 490px;
  width: 680px;
  position: absolute;
}

.tabNav .tabPanel {
  display: none;
}

.tabNav .tabPanel p {
  margin: 24px 16px;
}

.tab li.active {
  background-color: #3a9eac;

}