为什么100％宽度穿过父div？

Question

更新：this answer无效。看看this pen

我设置了div 700px的宽度但是如果我添加一个子div 100％宽度，那么子div跨父div的边界和子div的实际大小是730px。为什么？codepen

<div class="container">
  <h1>Drive Nuts</h1>
 <div class="info">
  <div class="left">Call No.</div>
  <div class="right">Datas</div>
 </div>
</div>

的CSS：

    body {
       background: #34495e; 
       padding: 50px 0px;
    }

   .container {
       background: #ecf0f1; 
       min-height:480px; 
       width:700px; margin: 0px auto;
    }
    .container h1 {
       text-align: center;
       background: #27ae60; 
       color: #ecf0f1; 
       line-height: 90px; margin: 0px;
     }

     .left  {
       background: #16a085;
       padding:15px; 
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:150px; float:left;
     }

     .right  { 
       padding:15px;
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:; 
       float:left; 
       background: #2c3e50;
       width:100%;
    }

Answer 1

您必须从padding中移除30px（width）。您可以使用calc()来执行此操作。

.right {
    padding: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #FFF;
    float: left;
    background: none repeat scroll 0% 0% #2C3E50;
    width: calc(100% - 30px);
}