Try it Live

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <style>
     .secA {
      box-sizing:border-box;
      background:skyblue;
      border:3px solid black;
      width:320px;
	  max-width:90%;
      height:110px;
      margin:4px;
     }
	 
	 .secB {
      box-sizing:border-box;
      background:skyblue;
      border:3px solid black;
      width:320px;
	  max-width:90%;
      height:110px;
      padding:30px;
      margin:4px;
     }
	 
     .secC {
      background:skyblue;
      border:3px solid black;
      width:320px;
	  max-width:90%;
      height:110px;
      padding:30px;
      margin:4px;
     }
	 
	 p {
	   background-color:orange;
	 }
    </style>
  </head>
  <body>
    <section class="secA"><p>The content area for secA starts here
     as padding is Zero</p></section>
    <section class="secB"><p>For secB, the content area starts here
	 i.e. the content area shrinks</p></section>
    <section class="secC"><p>For secC, the content area starts here.
	 The width/height of element looks bigger</p></section>
  </body>
</html>