Responsive Probleme mit vertikaler ul

[McDudelsack]

Hi zusammen, stehe vor einem doppelten Problem… Es handelt sich um 2 Seiten die ich gerade versuche responsive tauglich zu machen. Da die beiden Probleme fast identisch sind, schreibe ich mal beide Varianten hier hin.

Variante 1: Ich habe eine vertikale Navigation, umgeben von einem Container. Der Container hat eine Min-Height von 30px. Darin befindet siche eine ul mit dem Attribut list-style-type:none. Die a li elemente stehen auf display:block und haben oben genannte min-height. Nun habe ich ein Icon/Image eingebunden, dieses steht auch per CSS auf display:block. Nun möchte ich das, bei entsprechendem Viewport, auch die Beschriftung in dem darunterliegenden Span erscheint. Das klappt auch, allerdings wird das Element nicht größer (background), sondern geht über das li-element hinaus. Weiß leider gerade nicht wie ich es erklären soll, darum hier der Auszug aus dem CSS.

#navigation{
  min-height:30px;
  width:100%;
  background: #ff670f;
  border-bottom:1px solid #fff;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

#navigation ul{
  list-style-type:none;
  height:auto;
}

#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited, #navigation ul li a:active{
  display:block;
  width:20%;
  min-height:80px;
  box-sizing:border-box;
  border-right:1px solid black;
  float:left;
  transition: background 1s;
}

#navigation ul li a:hover, #navigation ul li a:focus{
  background:#389648
}

#navigation ul li a img{
  display:block;
  height:30px;
  margin:0 auto;
  
}

#navigation ul li a span{
  display:block;
  height:20;
  margin:0 auto;
  display:none;
}

Ein ähnliches Problem habe ich bei einer anderen Seite, wo ich die gleichen Ansätze habe, allerdings soll hier der text bei entsprechend großem Viewport neben dem img angezeigt werden. Hier ist nun das Problem, das der text nicht horizontal zentriertr wird. Dieses aber nur wenn das Icon angezeigt wird (testweise rausgenommen).

ich weiß es ist verwirrend geschrieben, bei Fragen bitte einfach melden. Vorzeige seiten habe ich leider nicht, da es beides geschützte Vereinsseiten sind.

Danke Euch