Gap between sections and text appearing in wrong column

Question

I am working on a div with some links and a footer and I have some issues.

For some reason there is a white gap between both sections. I used inspect and it appears to be a margin block that is hidden? I added margin-bottom/top: 0;, but it didn't work. Is there any way to remove it so that there is a gapless transition from the links section to the footer?

Moreover, the question words link in the links section is meant to be in the second column (and I coded it so as you can see), but it appears in the first column and I'm not sure why.

Thanks a lot for your help!

.footerwrapper {
  padding: 10px 20px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 120px;
  background-color: #333;
}

.contentcontainer {
  margin: 0 260px 0 260px;
  max-width: 960px;
  height: 440px;
  width: 960px;
  display: block;
  box-sizing: border-box;
}

.footitle p {
  text-align: left;
  color: #EEEEEE;
  font-size: 28px;
}

.twocols {
  column-count: 2;
  column-gap: 5px;
  padding-bottom: 20px;
}

.twocolsblock1 .twocolsblock2 {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  width: auto;
  align-items: center;
}

.lessonlinktitle.footer {
  color: #E5E5E5;
  font-size: 18px;
  line-height: 25px;
  cursor: pointer;
  word-spacing: 0px;
  display: block;
  outline: rbg(255, 0, 0) dashed 1px;
  width: 306px;
  text-decoration: none solid rgba(203, 203, 193, 0.77) !important;
}

.lessonlinkblurb.footer {
  color: #CBCBC1;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  word-spacing: 0px;
  display: block;
  outline: rbg(255, 0, 0) dashed 1px;
  width: 306px;
  text-decoration: none solid rgba(203, 203, 193, 0.65) !important;
}


/********* Footer ************/

.footerwrapper.bottom {
  background-color: #111;
  position: relative;
  font-size: 13px;
  margin: 0;
  min-height: 100%;
  padding: 0;
  background: #1f1c1f;
  color: #FFFFFF;
  text-align: center;
  height: 30px;
  font-family: 'Nunito Sans', sans-serif;
}

<div class="footerwrapper">
  <div class="contentcontainer">
    <div class="footitle">
      <p id="learn">Learn Chokwe</p>
    </div>
    <div class="twocols">
      <div class="twocolsblock1">

        <a href="/greetings.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Greetings & Introductions</div>
          <div class="lessonlinkblurb footer">How to greet and introduce yourself in Chokwe</div>
        </a>

        <br>
        <a href="/family.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Family</div>
          <div class="lessonlinkblurb footer">How can you describe your family in Chokwe?</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Numbers</div>
          <div class="lessonlinkblurb footer">How to count in Cokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Days of the Week</div>
          <div class="lessonlinkblurb footer">How to say the days of the week in Chokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Months of the year</div>
          <div class="lessonlinkblurb footer">How to say the months of the year in Chokwe</div>
        </a>

        <br>
        <a href="/timenumbers.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Time and time concepts</div>
          <div class="lessonlinkblurb footer">How say early, late, always and other concepts in Chokwe</div>
        </a>

      </div>

      <div class="twocolsblock2">

        <a href="/learn-italian/question-words" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Question words</div>
          <div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How to ask questions in Chokwe</div>
        </a>

        <br>
        <a href="/travelling.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Travelling</div>
          <div class="lessonlinkblurb footer">Need to get to travel somewhere? Learn how to do it in Chokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Shopping</div>
          <div class="lessonlinkblurb footer">Let's go shopping and see how to buy items in Chokwe</div>
        </a>

        <br>
        <a href="/verbs.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Important Verbs</div>
          <div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. How to use verbs in Chowke</div>
        </a>

        <br>
        <a href="/proverbs" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Proverbs</div>
          <div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
        </a>

        <br>
        <a href="/phrases.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Phrases</div>
          <div class="lessonlinkblurb footer">Extra phrases in Chokwe that may be handy</div>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="footerwrapper bottom">
  <p> ©2020 | Chokwe Language </p>
</div>
</body>

Answer 1

Because you used the P tag. And sets a margin for that by default. Removing it will solve the gap problem.

p {
  margin: 0;
}

And for second problem, you can use:

.twocols {
    display: flex;
    /* column-count: 2; */
    /* column-gap: 5px; */
    /* padding-bottom: 20px; */
}