title: How to make the mini image & description container located at the bottom or end of the navbar / header?
body: <p>How to place the <code>ui-thumbnails ui-content</code> container at the bottom, lower than the<code>navbar</code> or <code>header</code> without leaving the container outside.</p>
  
  <p>As you can see the design aspect where the mini images are and, the description this container leaves a space at the bottom on the design of the background image of the <code>navbar</code> you can see in the following complete code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   font-family: Ubuntu;
   font-size: 15px; /*0.9rem;*/
   line-height: 1.6rem;
  }
  *, ::after, ::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
  }
  body {
   font-family: Ubuntu;
   font-size: 1.0rem;
   line-height: 1.6rem;
   color: #363535;
   background-color:#f5f5f5;
  }
  
  /************MENU NAVEGATION******************/
  .navbar{
   background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://i.imgur.com/NU3T1ef.jpg);
   background-size: cover;
   height: 800px;
   width: 100%;
   color: #333;
  }
  .nav-club {
   padding: 0.3em;
   height: 60px;
   width: 80%;
   background: #fff;
  }
  
  .club-site {
   display: inline-block;
  }
  .club-site h4 {
   color: #267788;
   font-size: 1.1rem;
   line-height: 5rem;
  }
  .nav {
   background: linear-gradient(45deg, rgba(58, 134, 68, 0.9), rgba(86, 184, 98, 0.72)), url(https://i.imgur.com/VTrnpmb.png);
   background-position: center bottom;
   width: 100%;
   height: 4.5rem;
   background-size: cover;
  }
  
  .logo {
   height: 6rem;
   top: 0px;
   left: 0;
   position: relative;
  }
  
  .logo img {
   max-height: 100px;
   position: absolute;
   bottom: 0;
   left: 0;
  }
  .navigation {
   padding-left: 17rem;
   float: left;
   color: #000;
  }
  
  .navigation ul li {
   padding: 1em;
   display: inline-block;
  }
  
  
  /**********GALLERY**********/
  img {
   max-width: 100%;
  }
  .gallery {
   width: 90%;
   height: 85%;
   overflow: hidden;
  }
  .ui-big-images {
   position: absolute;
   height: 100%;
   width: 100%;
   overflow: hidden;
   display: -webkit-box;
   display: flex;
   /*flex-direction: column-reverse;*/
  }
  .ui-big-image {
   width: 100%;
   margin-right: -100%;
  }
  .ui-big-image img {
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center 30%;
   object-position: center 30%;
   width: 100%;
   height: 100%;
   display: block;
  }
  .ui-thumbnails {
   position: absolute;
   width: 100%;
   bottom: 0;
   left: 0;
   background-color: #fff;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-pack: start;
   justify-content: flex-start;
   -webkit-box-align: center;
   align-items: center;
   padding: 0 1rem;
   padding-top: .5rem;
   padding-right: 45%;
   padding-right: calc( 45% + .5rem);
  }
  .ui-thumbnail {
   display: block;
   margin-right: .5rem;
   padding: .5rem 0;
   cursor: pointer;
  }
  .ui-cuticle {
   background-color: #D4A12D;
   /*position: absolute;*/
   bottom: 0;
   height: .25rem;
   width: 100%;
  }
  .ui-thumbnail&gt;img {
   width: auto;
  }
  .ui-content {
   position: absolute;
   width: 40%;
   right: 5%;
   bottom: 0;
  }
  .ui-articles {
   background: #493e56;
   color: white;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: stretch;
   align-items: stretch;
   overflow: hidden;
  }
  .ui-article {
   padding: 1.5rem;
   width: 100%;
   margin-right: -100%;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   -webkit-box-pack: center;
   justify-content: center;
  }
  .ui-paragraph {
   margin: 0;
   font-size: .7rem;
   line-height: 1.7;
  }
  .ui-nav {
   position: absolute;
   right: 0;
   bottom: 100%;
   background: inherit;
  }
  .ui-nav button {
   display: unset !important;
   background: #493e56;
   border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: .5em;
   width: 2em;
   color: #FFF;
   font-family: monospace;
   -webkit-transition: inherit;
   transition: inherit;
   -webkit-transition-duration: 300ms;
   transition-duration: 300ms;
  }
  .ui-nav button:hover,
  .ui-nav button:focus {
   background: #D4A12D;
   outline: none;
  }
  .ui-nav button:active {
   outline: none;
   -webkit-transform: translateY(0.25em);
   transform: translateY(0.25em);
   -webkit-transition-duration: 100ms;
   transition-duration: 100ms;
  }
  .ui-heading {
   margin: 0;
   margin-bottom: 0.5rem;
   font-size: 1rem;
   font-weight: normal;
  }
  .ui-heading:before {
   content: 'Animator';
   font-size: .5rem;
   text-transform: uppercase;
   display: block;
   margin-bottom: .5rem;
   letter-spacing: 1px;
  }
  /* ---------------------------------- */
  .ui-big-image {
   opacity: 0;
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
  }
  .ui-big-image.show {
   opacity: 1;
   -webkit-transform: translateX(0);
   transform: translateX(0);
  }
  .ui-big-image img {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
  }
  .ui-big-image[data-active]~.ui-big-image {
   -webkit-transform: translateX(100%);
   transform: translateX(100%);
  }
  .ui-big-image[data-active] {
   opacity: 1;
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
  }
  .ui-big-image[data-active] img {
   -webkit-transform: scale(1);
   transform: scale(1);
  }
  /* ---------------------------------- */
  .ui-article {
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
  }
  .ui-article.show {
   -webkit-transform: translateX(0);
   transform: translateX(0);
  }
  .ui-article:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #D4A12D;
   opacity: 1;
   -webkit-transition-duration: 0.35s;
   transition-duration: 0.35s;
   z-index: 1;
  }
  .ui-article.show:before {
   opacity: 0;
  }
  .ui-article[data-active]~.ui-article {
   -webkit-transform: translateX(100%);
   transform: translateX(100%);
  }
  .ui-article[data-active] {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
  }
  .ui-article[data-active]:before {
   opacity: 0;
  }
  /* ---------------------------------- */
  .ui-thumbnail&gt;img {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   -webkit-transition-duration: 0.35s;
   transition-duration: 0.35s;
  }
  .ui-thumbnail:active&gt;img {
   -webkit-transform: scale(0.9);
   transform: scale(0.9);
   -webkit-transition-duration: 100ms;
   transition-duration: 100ms;
  }
  .ui-thumbnail:focus {
   outline: none;
  }
  .ui-cuticle {
   display: none;
  }
  .ui-cuticle.show {
   display: block;
  }
  .ui-thumbnail[data-active]&gt;img,
  .ui-thumbnail:hover&gt;img {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
  }
  .ui-thumbnail[data-active] .ui-cuticle {
   display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div class="navbar"&gt;
     &lt;div class="container"&gt;
      &lt;div class="row"&gt;
       &lt;div class="maximum"&gt;
  
        &lt;div class="nav clear"&gt;
         &lt;div class="logo"&gt;
         &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="gallery" data-state="0"&gt;
         &lt;div class="ui-big-images"&gt;
          &lt;div class="ui-big-image" data-key="0"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=1005" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="ui-big-image" data-key="1"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=804" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="ui-big-image" data-key="2"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=838" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="ui-big-image" data-key="3"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=832" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="ui-big-image" data-key="4"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=836" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="ui-big-image" data-key="5"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=823" alt="" /&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="ui-thumbnails"&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="0"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=1005" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="1"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=804" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="2"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=838" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="3"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=832" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="4"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=836" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="ui-thumbnail" tabindex="-1" data-key="5"&gt;
           &lt;img src="https://picsum.photos/1200/1200/?image=823" alt="" /&gt;
           &lt;div class="ui-cuticle" data-flip-key="cuticle"&gt;&lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="ui-content"&gt;
          &lt;nav class="ui-nav"&gt;
           &lt;button id="prev" tabindex="-1" title="Previous"&gt;&amp;lt;&lt;/button&gt;
           &lt;button id="next" tabindex="-1" title="Next"&gt;&amp;gt;&lt;/button&gt;
          &lt;/nav&gt;
          &lt;div class="ui-articles"&gt;
           &lt;article class="ui-article" data-key="0"&gt;
            &lt;h2 class="ui-heading"&gt;Stephen Shaw&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.&lt;/p&gt;
           &lt;/article&gt;
           &lt;article class="ui-article" data-key="1"&gt;
            &lt;h2 class="ui-heading"&gt;David Khourshid&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. &lt;/p&gt;
           &lt;/article&gt;
           &lt;article class="ui-article" data-key="2"&gt;
            &lt;h2 class="ui-heading"&gt;Coding Compadre&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. &lt;/p&gt;
           &lt;/article&gt;
           &lt;article class="ui-article" data-key="3"&gt;
            &lt;h2 class="ui-heading"&gt;Boolean Buddy&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. &lt;/p&gt;
           &lt;/article&gt;
           &lt;article class="ui-article" data-key="4"&gt;
            &lt;h2 class="ui-heading"&gt;Animation Amigo&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus&lt;/p&gt;
           &lt;/article&gt;
           &lt;article class="ui-article" data-key="5"&gt;
            &lt;h2 class="ui-heading"&gt;Keyframe Companion&lt;/h2&gt;
            &lt;p class="ui-paragraph"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti&lt;/p&gt;
           &lt;/article&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
  
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried to solve using the developer console by adding and removing different types of styles but without obtaining results.</p>
  
  <p>What I want to achieve is to show the container of the mini images and, description <code>ui-thumbnails ui-content</code> that are always shown at the bottom at the end without overflowing from the<code>navbar</code> or <code>header</code> for example:</p>
  
  <p><a href="https://i.stack.imgur.com/Y6yo7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y6yo7.png" alt="enter image description here"></a></p>
  
  <p>And in responsive</p>
  
  <p><a href="https://i.stack.imgur.com/mXjFh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXjFh.png" alt="enter image description here"></a></p>