title: CSS Grid - Spans overlapping, can't get in-line
body: <p>on my portfolio site, I have boxes which indicate my projects. Where it displays the languages used per project, they seem to overlap entirely and wont adjust to fit all of them in their allocated div while maintaining keeping the skills section and the "visit site" button in line, does anybody know why?</p>
  
  <p>Link to the website in question, feel free to inspect the code:
  HTML</p>
  
  <pre><code>&lt;article class="project-card"&gt;
      &lt;div class="project4img" &gt;&lt;/div&gt;
      &lt;div class="project1-header"&gt;
          &lt;h5 class="project1"&gt;Template 2&lt;/h5&gt;
          &lt;h6 class="development"&gt;Development start date: 03/06/2018"&lt;/h6&gt;
          &lt;p&gt;Started inplimenting CSS Grid for a more easy responsive layout. Also includes vue.js and vanilla js.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="bottomSection"&gt;
          &lt;div class="skillSection"&gt;
              &lt;span class="skill"&gt;HTML&lt;/span&gt;
              &lt;span class="skill"&gt;CSS&lt;/span&gt;
              &lt;span class="skill"&gt;JAVASCRIPT&lt;/span&gt;
              &lt;span class="skill"&gt;VUE.JS&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="visitSite"&gt;&lt;a class="visitProject1" href="https://donnieberry97.github.io/project2/"&gt;Visit Site&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.skill {
      border-radius: 4px;
      border: 2px solid #92eac0;
      padding: 8px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-family: Camphor, Open Sans, Segoe UI, sans-serif;
      font-size: .85em;
      color: #525f7f;
  }
  
  .bottomSection {
      padding: 3em 3em;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 50% 50%;
  }
  
  .visitSite {
      text-align: right;
  }
  </code></pre>