css " display: inline-block for 3 column"
<p>I was wondering everytime I set a width in the first column of my display-inline-block CSS method, the other column will go down for how many pixel but if I use padding instead of width the other column will not go down. Can someone explain me why is this happening? NEWBIE Here</p>

<p><strong>The first picture using width in the first column</strong></p>

<p><a href="https://i.stack.imgur.com/L70jf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L70jf.jpg" alt="enter image description here"></a></p>

<p><strong>Second image using padding</strong></p>

<p><a href="https://i.stack.imgur.com/kYM1Y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYM1Y.jpg" alt="enter image description here"></a></p>

<p><strong>The Code</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: "Arial",Helvetica, sans-serif, serif;
  color: white;
  background: gray;
  margin: 0;
}
div.wrapper {
  border: 3px black dashed;
}

/*===============header===================*/
header.main-header {
  border: 2px pink dashed;
}
h1.main-h1 {
  margin: 10px 0 0 0;
  border: 1px black solid;
  text-align: center;
}
p.p-header {
  font-style: italic;
  margin-top: 0;
  padding-left: 57.5%;
  position: absolute;
  top: 27px; 
  line-height: 12px;
}
/*==============end of header============*/

/*==============navigation bar===========*/
nav.main-nav {
  border: 2px green solid;
  text-align: center;
}
p.p-nav {
  margin: 0;
  right: 1%;
}
/*============end of navigation=========*/

/*============section===================*/
div.column {
  border: 2px blue dashed;
}
section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
}
section.first-column {
  padding-right: 4%;
  margin-left: 1%;
}
section.second-column {
  width: 60%;
  margin-left: 1%;
}
section.third-column {
  width: 20%;
  margin-left: 1%;
}
/*==============footer==================*/
footer.main-footer {
  border: 1px white solid;
  text-align: center;
  clear: both;
}
/*=============end of footer===========*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
&lt;html lang="eng"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="_css/typhography.css"&gt;
    &lt;title&gt;Typhography&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;header class="main-header"&gt;
        &lt;h1 class="main-h1"&gt;Typhography&lt;/h1&gt;
        &lt;p class="p-header"&gt;learning things&lt;br&gt;with showe&lt;/p&gt;
      &lt;/header&gt;
      &lt;nav class="main-nav"&gt;
        &lt;p class="p-nav"&gt;This is for Navigation Section&lt;/p&gt;
      &lt;/nav&gt;
      &lt;div class="column"&gt;
        &lt;section class="first-column"&gt;This is first column&lt;/section&gt;
        &lt;section class="second-column"&gt;This is second column&lt;/section&gt;
        &lt;section class="third-column"&gt;This is third column&lt;/section&gt;
      &lt;/div&gt;
      &lt;footer class="main-footer"&gt;
        &lt;small&gt;this is footer&lt;/small&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>