title: Padding affects container size?
body: <p>See the following Codepen sample:
  <a href="https://codepen.io/anon/pen/yWXRvR" rel="nofollow noreferrer">https://codepen.io/anon/pen/yWXRvR</a></p>
  
  <p>Concerning the <em>tourplaces</em> container at the bottom of the page (see CSS section commented as <em>Article: tour dates: tourplaces</em> at the bottom of the CSS):</p>
  
  <p>Why is it that when I arbitrarily change the left or right padding of a .place (e.g. the first .place : padding-left: 0), the .place images as well as their container suddenly become different sizes? 
  The .place containers then become inconsistent, having different heights. This is not what I want - I want them to stay horizontally bottom-aligned like they initially were.</p>
  
  <p>Is it because the padding makes the image's width more narrow and then the height automatically adjusts along with it, making the .place content box longer?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* General styles */
  
  * {
   box-sizing: border-box;
   font-family: Arial;
  }
  
  body {
   margin: 0;
  }
  
  a {
   text-decoration: none;
  }
  
  /* Specific styles */
  
  /* nav */
  
  nav {
   position: sticky;
   top: 0;
   z-index: 1;
  }
  
  nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   background-color: #000;
   overflow: hidden;
  }
  
  nav ul li {
   float: left;
  }
  
  nav ul li a{
   padding: 16px 24px;
   color: white;
   
   display: block;
   text-transform: uppercase;
  }
  
  nav ul li a:hover {
   background-color: #ccc;
  }
  
  nav ul li:nth-of-type(5) {
   /*position: relative;*/
  }
  
  nav ul li:nth-of-type(5) div a {
   display: block;   
   color: black;
   text-transform: capitalize; 
  }
  
  nav ul li:nth-of-type(5) div a:hover a {
   background-color: #ccc;
  }
  
  nav ul li:nth-of-type(5) div {
   display: none; 
   position: absolute;
   z-index: 1;
   
   box-shadow: 0 0 5px #aaa;
   background: white;
  }
  
  nav ul li:nth-of-type(5):hover div {
      display: block;
  }
  
  #search { 
   float: right;
  }
  
  #search i {
   color: white;
   
   padding: 16px 24px;
   font-size: 18px; 
   transition: 0.5s ease;
  }
  
  #search i:hover {
   color: #aaa;
  }
  
  .fa-sort-down {
   vertical-align: text-top;
   font-size: 18px;
   transform: translateY(-25%);
  }
  
  /* Animation */
  
  #bandpics {
   overflow: hidden;
  }
  
  img#chicago,
  img#la,
  img#ny { 
   width: 100%;
   display: block;
   position: absolute;
   
   animation-name: slide;  
   animation-duration: 18s;
   animation-iteration-count: infinite;
  }
  
  img#chicago {
   animation-delay: 6s;
  }
  
  img#la {
   animation-delay: 4s; 
  }
  
  img#ny {
   animation-delay: 2s; 
  }
  
  @keyframes slide {
   0% { opacity: 1; }
   22% { opacity: 1; }
   33% { opacity: 0; }
   88% { opacity: 1; }
   100% { opacity: 1; }
  }
  
  /* Article: the band */
  
  #band {
   width: 100%;
   position: relative;
   margin-top: 50%;
   text-align: center;
   padding: 10% 30%;
   
   background-color: white;
  }
  
  #band h2 {
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: 0.25em;
  }
  
  #band &gt; h4 {
   font-style: italic; 
   font-weight: 500;
   color: #888;
  }
  
  #band h4::first-letter {
   text-transform: capitalize; 
  }
  
  #band p {
   text-align: justify;
   margin-bottom: 7%;
   line-height: 1.3em;
  }
  
  #bandmembers { 
   overflow: hidden;
  }
  
  .bandmember img {
   max-width: 50%; 
  }
  
  .bandmember h4 {
   font-weight: 100;
  }
  
  /* Article: tour dates  */
  
  /* Article: tour dates: sales lines */
  
  #tourdates , #tourplaces {
   background-color: black;
   padding: 1% 30%;
  }
  
  #tourdates h2 {
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: 0.25em;
   color: white;
   text-align: center;
  }
  
  #tourdates h4 {
   text-align: center;
   color: #888;
   font-style: italic; 
  }
  
  #tourdates h4:first-letter {
   text-transform: uppercase;
  }
  
  .month {
   color: #888;
   background-color: white;
   padding: 3%; 
   border-bottom: 1px solid #ccc;
  }
  
  .month span:first-of-type {
   text-transform: capitalize;
   margin-right: 15px;
  }
  
  .month span {
   display: inline-block;
  }
  
  div.month:nth-of-type(1) span:nth-of-type(2),
  div.month:nth-of-type(2) span:nth-of-type(2) {
   background-color: #f44336;
   color: white;
   padding: 5px 10px;
  }
  
  div.month:nth-of-type(1) span:nth-of-type(2)::first-letter,
  div.month:nth-of-type(2) span:nth-of-type(2)::first-letter {
   text-transform: uppercase; 
  }
  
  div.month:last-of-type {
   position: relative;
  }
  
  div.month:last-of-type span:nth-of-type(2) {
   background-color: black;
   color: white;
   border-radius: 50%;
   
   padding: 4px 10px;
   position: absolute;
   top: 50%;
   right: 5%;
   transform: translateY(-50%);
  }
  
  /* Article: tour dates: tourplaces */
  
  #tourplaces {
   overflow: hidden;
   margin: -8px;
  }
  
  .place {
   float: left;
   width: 33.33333%;
   background-clip: content-box;
   background-color: white;
   padding-left: 8px;
   padding-right: 8px;
  }
  
  .place img {
   width: 100%;  
  }
  
  .place img:hover {
   opacity: 0.60;
  }
  
  .place-info { 
   padding-left: 8px;
   padding-right: 8px;
   padding-bottom: 8px;
  }
  
  .place-info &gt; *:not(p) {
   text-transform: capitalize;
  }
  
  .place-info h4 {
   white-space: nowrap;
  }
  
  .place-info h4:nth-of-type(2) {
   color: #888;
   font-weight: 400;
  }
  
  .place button {
   background-color: black;
   color: white;
   padding: 10px; 
  }
  
  
  
  @media only screen and (min-width: 1000px) {
   #band {
    padding: 5% 30%;  
   }
   
   .bandmember {
    float: left;
    width: 33.33333%
   }
   
   .bandmember img {
    max-width: 60%;  
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- from:
  https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
  --&gt;
  
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"&gt; 
  
  &lt;nav&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#band"&gt;band&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#tour"&gt;tour&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;more &lt;i class="fas fa-sort-down"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;div&gt;
       &lt;a href="#merchandise"&gt;merchandise&lt;/a&gt;
       &lt;a href="#extras"&gt;extras&lt;/a&gt;
       &lt;a href="#media"&gt;media&lt;/a&gt;
      &lt;/div&gt;
     &lt;/li&gt;
     &lt;li id="search"&gt;
      &lt;i class="fas fa-search"&gt;&lt;/i&gt;
     &lt;/li&gt;   
    &lt;/ul&gt;
   &lt;/nav&gt;
  
   &lt;div id="container"&gt;
    &lt;div id="bandpics"&gt;
     &lt;img id="chicago" src="https://www.w3schools.com/w3images/chicago.jpg" alt="Chicago"&gt;
     &lt;img id="la" src="https://www.w3schools.com/w3images/la.jpg" alt="LA"&gt;
     &lt;img id="ny" src="https://www.w3schools.com/w3images/ny.jpg" alt="NY"&gt;
    &lt;/div&gt;
    
    &lt;article id="band"&gt;
     &lt;h2&gt;the band&lt;/h2&gt;
     &lt;h4&gt;we love music&lt;/h4&gt;
     
     &lt;p&gt;We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
     
     &lt;div id="bandmembers"&gt;
      &lt;div class="bandmember"&gt;
       &lt;h4&gt;name&lt;/h4&gt;
       &lt;img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember"&gt;
      &lt;/div&gt;
      &lt;div class="bandmember"&gt;
       &lt;h4&gt;name&lt;/h4&gt;
       &lt;img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember"&gt;
      &lt;/div&gt;
      &lt;div class="bandmember"&gt;
       &lt;h4&gt;name&lt;/h4&gt;
       &lt;img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember"&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/article&gt;
  
    &lt;article id="tourdates"&gt;
     &lt;h2&gt;tour dates&lt;/h2&gt;
     &lt;h4&gt;remember to book your tickets!&lt;/h4&gt;
     
     &lt;div class="month"&gt;
      &lt;span&gt;september&lt;/span&gt;&lt;span&gt;sold out&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="month"&gt;
      &lt;span&gt;october&lt;/span&gt;&lt;span&gt;sold out&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="month"&gt;
      &lt;span&gt;november&lt;/span&gt;&lt;span&gt;3&lt;/span&gt;
     &lt;/div&gt;
    &lt;/article&gt;
    
    &lt;article id="tourplaces"&gt;
     &lt;div class="place"&gt;
      &lt;img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY"&gt;
      
      &lt;div class="place-info"&gt;
       &lt;h4&gt;new york&lt;/h4&gt;
       &lt;h4&gt;fri 27 nov 2016&lt;/h4&gt;
       
       &lt;p&gt;Praesent tincidunt sed tellus ut rutrum sed vitae justo.
       &lt;/p&gt;
       
       &lt;button&gt;buy tickets&lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="place"&gt;
      &lt;img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris"&gt;
      
      &lt;div class="place-info"&gt;
       &lt;h4&gt;paris&lt;/h4&gt;
       &lt;h4&gt;sat 28 nov 2016&lt;/h4&gt;
       
       &lt;p&gt;Praesent tincidunt sed tellus ut rutrum sed vitae justo.
       &lt;/p&gt;
       
       &lt;button&gt;buy tickets&lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="place"&gt;   
      &lt;img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco"&gt;
      
      &lt;div class="place-info"&gt;
       &lt;h4&gt;san francisco&lt;/h4&gt;
       &lt;h4&gt;sun 29 nov 2016&lt;/h4&gt;
       
       &lt;p&gt;Praesent tincidunt sed tellus ut rutrum sed vitae justo.
       &lt;/p&gt;
       
       &lt;button&gt;buy tickets&lt;/button&gt;
      &lt;/div&gt;
    &lt;/article&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>