css width属性未正确应用

Question

正如您所看到的，在tr中有三个表格单元格，其中包含名称价格和数量类别。我给他们每人宽30％。因此，他们应该覆盖页面的90％，但看起来他们中的三个甚至不覆盖页面的一半。虽然当我给他们每个宽度加起来100％他们实际上工作但我希望它们覆盖90％的页面，这些内容似乎无法正常工作，如您在代码段中所见。

＆＃13;

＆＃13;

 #flexing .welcome  .note {
  padding-bottom: 0;
}

#flexing .welcome .checkout {
  margin:10px;
}

#flexing .welcome .cart a {
  color:white;
  text-decoration: none;
  font-size:15.5px;
}

#flexing .welcome table .name {
  width:30%;
  border:1px solid red;
  color:red;
}

#flexing .welcome table .price {
  width:30%;
  border:1px solid red;
  color:red;
}

#flexing .welcome table .quantity {
  width:30%;
  border:1px solid red;
  color:red;
}

＆＃13;

<div id="flexing">
  <div class="welcome">
    <h3>CHECK OUT</h3>
    <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div>
    <div class="note">
      <div class="checkout">
        <table>
          <tbody>
            <tr>
              <td class="name">Name</td>
              <td class="price">Price</td>
              <td class="quantity">Quantity<td>
            </tr>
            <tr>
              <td>Faction | Hero rank</td>
              <td>5.00 EUR</td>
              <td class="button">1 
                <a href="#">aa</a>
                <a href="#">aa</a>
                <a href="#">aa</a>
              </td>
            </tr>
          </tbody>	
        </table>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;