Whats wrong with the padding+

Question

Hello all dude's out there!

I have a creapy error when I'm trying to redesign a responsive off-canvas menu.

When I'm trying to get the meny as an horizontally navigation my elements appears very strange.

What I want to do is to add some padding on top and bottom to the LI-element but it's not working. The padding I get is on right and left side of the LI-element.

What have I missed?

HTML:

    /* - - -  RESPONSIVE MENU - - -  */
    @media all and (max-width: 768px) {
    	/* menu */
    .c-menu {
      position: fixed;
      z-index: 200;
      background-color: #67b5d1;
      -webkit-transition: -webkit-transform 0.3s;
              transition: transform 0.3s;
    }
    .c-menu--slide-left .c-menu__item {
      display: block;
      text-align: center;
      border-top: solid 1px #b5dbe9;
      border-bottom: solid 1px #3184a1;
    }
    .c-menu--slide-left .c-menu__item:first-child {
      border-top: none;
    }
    .c-menu--slide-left .c-menu__item:last-child {
      border-bottom: none;
    }
    
    .c-menu--slide-left .c-menu__link {
      display: block;
      padding: 12px 24px;
      color: #fff;
    }
    
    .c-menu--slide-left .c-menu__close{
      display: block;
      padding: 12px 24px;
      width: 100%;
    }
    
    .c-menu__items {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    /* menu-button - responsive */
    
    .nav-button {
      display: inline-block;
      margin: 4px;
      padding: 12px 24px;
      color: #67b5d1;
      background: none;
      font-size: 14px;
      border: solid 2px #67b5d1;
      box-shadow: none;
      border-radius: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
    }
    
    .nav-button:focus {
      outline: none;
    }
    
    .nav-button:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    
    } /*CLOSE MEDIA-QUERY FOR RESPONSIVE MENU MAX WIDTH 768PX*/ 
    
    @media all and (min-width: 769px) {
    .nav-button{
    	display: none !important;
    }
    
    .c-menu {
      position: relative;
      z-index: 1;
      text-align: center;
      background-color: #005ca8;
      display: inline !important;
      overflow: hidden;
      clear: both;
    }
    
    .c-menu__close{
    	display: none !important;
    }
    
    .c-menu--slide-left .c-menu__item {
      display: inline;
      text-align: center;
      border-top: none;
      border-bottom: none;
      
    }
    .c-menu--slide-left .c-menu__item:first-child {
      border-top: none;
    }
    .c-menu--slide-left .c-menu__item:last-child {
      border-bottom: none;
    }
    
    .c-menu--slide-left .c-menu__link {
      display: inline;
      padding: 30px;
      color: #fff;
    }
    
    .c-menu--slide-left .c-menu__close{
      display: inline;
      width: 100%;
    }
    
    .c-menu__items {
      list-style: none;
      margin: 0;
      background: #005ca8;
    }

        <nav id="c-menu--slide-left" class="c-menu c-menu--slide-left">
      <button class="c-menu__close">&larr; Stäng Meny</button>
      <ul class="c-menu__items">
        <li class="c-menu__item"><a href="#" class="c-menu__link">Home</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">About</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Services</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Work</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Contact</a></li>
      </ul>
    </nav><!-- /c-menu slide-left -->

Answer 1

Use display: inline-block to li

 .c-menu--slide-left .c-menu__item {
      display: inline-block;
      text-align: center;
      border-top: solid 1px #b5dbe9;
      border-bottom: solid 1px #3184a1;
    }

DEMO