Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite

[einsiedler]

Liebe Leute, bitte lasst mich nicht hängen…

Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur wenn @media screen and (max-width: 28.125em) kleiner ist, die gesamte Breite annimmt und beim schmaler werden eben alles ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur, was es ist kann ich mir nicht erklären.

@media screen and (max-width: 62.500em) {
			div.contentspan {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					margin: 0 0.3em; padding: 0;
					border: 3px dotted green;
						/*	flex: 0 0 100%; */
			}
			.fav {
				margin: 0;
				padding: 0;				
			}
			.headingspan {
				align-self: flex-start;				
			}
			header {
					display: block;
					margin: 0;
					padding: 0.55em;
			}
			
			header img {
					height: 110px; 
			}
			
			#main-nav {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;
				max-width: 21.5em;
				align-self: center;				
					/*	flex: 1 1 100%; */
			}
			
			.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
			.main-treeitem>[aria-expanded="true"]+* {
                margin-left: 0;
				margin-top: 0.8em;
            }
			.treeitem>[aria-expanded="false"]+ * {display:none !important;}
			
		}
		
		@media screen and (max-width: 28.125em) {
			header {
					display: block;
					margin: 0;
					padding: 0.55em;
			}
			nav > ul ul.group,
			nav > ul ul.group > li {margin:0; padding:0; display:block;}
			nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
			nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
			nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
			nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
			
			
			#main-nav {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				max-width: 100%;
				align-self: center;
			}
			
		}

Mensch Leute, bitte helft mir…

Darum gehts: fehlerhafte website

der misanthrop