title: Looking at a problem with image overlapping nav bar
body: <p>I got this issue that a portrait is overlapping my nav bar.
  And I've been looking around and trying to find a fix, but no luck.
  I have tried z-index, but sadly didn't work at all.</p>
  
  <p>My code for the section:</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>/*Navbar CSS*/
  
  .topNavMain,
  .topNavMain ul {
    margin: 0;
    padding: 0;
    background: rgba(227, 232, 237, 0.40);
    color: #5f6f81;
    list-style: none;
    text-transform: none;
    text-decoration: none;
    width: 100%;
    font-weight: 300;
    font-family: 'Lato', Arial, sans-serif;
    line-height: 60px;
    z-index: 999 !important;
  }
  
  
  /*img class CSS*/
  
  .imgPortrait {
    width: 80%;
    z-index: -999;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="aboutMe" class="contentS"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col slideIn margin-fix"&gt;
          &lt;h2 class="contentT"&gt;About me&lt;/h2&gt;
          &lt;p class="shortText"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;br&gt; Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. &lt;br&gt; Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col slideIn2"&gt;
          &lt;img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"&gt;&lt;/img&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Screenshot of my issue:
  <a href="https://i.stack.imgur.com/5v8ht.jpg" rel="nofollow noreferrer">Click here.</a></p>