title: Why the child Div exceeded the parent div right border
body: <p><a href="https://i.stack.imgur.com/3GoRd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3GoRd.png" alt="Exceeded the right border"></a></p>
  
  <p>In my project, I want to set my web homepage to four parts. So I defined four divs, about upleft, upright, downleft, downright in content div.</p>
  
  <p>I want to set 20px padding in content div , the left border is OK, But the right side is wrong.</p>
  
  <p>The upright and downright is exceeded the right border of content div.</p>
  
  <p>Ｉ have defined the four parts CSS</p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;body style="background:url(./image/taiyi.jpg); height:100%; width:100%;background-repeat:no-repeat"&gt;
    &lt;style&gt;
     .content{
       margin-left:auto;
       padding: 20px;
       margin-right:auto;
       width: 1400px;
       height:850px;
       background-color:white;
     }
    .content .uprow{
      width: 1400px;
      height: 400px;
      text-align:center;
      border: 1px solid #e5e5e5;
    }
    .content .uprow .upleft{
      width: 600px;
      height: 400px;
      float: left;
      background-color: white;
      border: 1px solid #999;
    }
   .lm_title_con{
     width: 600px;
     height: 100px;
     padding: 10px 20px;
   }
  .lm_title_con .lm_title{
     width: 85px;
     line-height: 45px;
     height: 30px;
     float: left;
     line-height: 30px;
     color: #3E6BC0;
     font-size: 18px;
     text-align: center;
     border-bottom: 1px solid #3E6BC0;
   }
  .content .uprow .upright{
    width: 600px;
    height: 400px;
    float: right;
    background-color: white;
    border: 1px solid #999;
  }
  .content .downrow{
    width: 1400px;
    height: 400px;
    margin-top: 20px;
  }
  .content .downrow .downleft{
    width: 600px;
    height: 400px;
    float: left;
    border: 1px solid #999;
    background-color: white;
  }
  .content .downrow .downright{
    width: 600px;
    height: 400px;
    float: right;
    border: 1px solid #999;
    background-color: white;
  }
   &lt;/style&gt;
  
   &lt;script type="text/javascript"&gt;
     $(function() {
      $("#header").load("header_02.html");
   });
   &lt;/script&gt;
  
  &lt;div id="header"&gt;&lt;/div&gt;    
  &lt;div class="content"&gt;
    &lt;div class="uprow"&gt;
      &lt;div class="upleft"&gt;
        &lt;div class="lm_title_con"&gt;
          &lt;div class="lm_title"&gt;
              中心宣传片
          &lt;/div&gt;
        &lt;/div&gt;      
      &lt;/div&gt;
      &lt;div class="upright"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="downrow"&gt;
      &lt;div class="downleft"&gt;&lt;/div&gt;
      &lt;div class="downright"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--footer start--&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;script&gt;
  $(function() {
      $("#footer").load("../footer_02.html");
  });
  &lt;/script&gt;
  &lt;!--footer end--&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I have set  <code>padding: 20px;</code> in content CSS.
  But upright and downright div exceeded the right border.</p>
  
  <p>I am confused, who can give me a help?</p>