Issues with list of subsections on Category page

Hi,

I've been struggling as a CSS newbie, so it'd be great if I can get some pointers! 

I'm using the Copenhagen theme and I have a 4-layered help page: a category page which shows a couple sections, and each section includes sub-sections, and each sub-section includes articles. 

As you can see, that doesn't look right.

• All sub-sections are shown in the blue "box", even though (I think) the style.css file indicates only a max of 3 items should be shown. 

  .section .section-list-item:nth-child(3) ~ .section-list-item {
  
  display: none;
  
  }

  I've tried using the code I could find in the community (not exactly the one in the screenshot below, but the main problem is that I'm not able to access "section"), but I get this type of error:
  

• There's a lot of space in between the subsections. I tried tweaking the style.css and the category template with no luck... How do I get rid of these? 

This is my category template for some context: 

<nav class="sub-nav">

  <div class="container">

    {{breadcrumbs}} {{search submit=false}}

  </div>

</nav>

<div class="container">

  <div class="category-container">

    <div class="category-content">

      <header class="page-header">

        <h1>{{category.name}}</h1>

        {{#if category.description}}

          <p class="page-header-description">{{category.description}}</p>

        {{/if}}

      </header>

      <div class="section-tree">

        {{#each sections}}

          <section class="section">

            <h2 class="section-tree-title">

              <a href="{{url}}">{{name}}</a>

              {{#if internal}}

                <span class="icon-lock" title="{{t 'internal'}}"></span>

              {{/if}}

            </h2>

            {{#if articles}}

              <ul class="article-list">

                {{#each articles}}

                  <li class="article-list-item">

                    <a href="{{url}}" class="article-list-link">{{title}}</a>

                  </li>

                {{/each}}

              </ul>

              {{#is article_count 1}}

              {{else}}

                {{#is article_count 2}}

                {{else}}

                  {{#is article_count 3}}

                  {{else}}

                    <a href="{{url}}" class="see-all-articles">

                      {{t 'show_all_articles' count=article_count}}

                    </a>

                  {{/is}}

                {{/is}}

              {{/is}}

            {{/if}}

           {{#if sections}}

            <ul class="section-list">

        {{#each sections}}

          <section class="section">

          <li class="section-list-item">

                  <a href="{{url}}">{{name}}</a>

          {{#if internal}}

<span class="icon-lock" title="{{t 'internal'}}"></span>

{{/if}}

            </li> 

        </section>

        {{/each}}

            </ul>

            <a href="{{url}}" class="see-all-sections">

              Show all sections

              </a>

               {{/if}}

        </section> 

{{else}}

          <i class="category-empty">

            <a href="{{category.url}}">{{t 'empty'}}</a>

          </i>

        {{/each}}

      </div>

    </div>

  </div>

</div>

Thank you!