Vertikale Nav-Leiste in Flexbox fixieren

[keineahnung]

Hallo, kurz zu mir: Ich habe bestimmt viele Schwächen, aber Webdesign ist meine Stärkste, wie ja mein Benutzername verrät. Ich habe im Mai ( völlig übnerraschend!) die Webgestaltung unserer Website übernommen. Dann habe ich mal begonnen, aus einer nichtfunktionierenden Seite eine fast nicht funktionierende zu bauen. ( wie man am horizontalem Menü sieht!) Das Ergebnis gibt es hier: https://www.kirche-und-wir.de Das, was online ist, ist erst ca. 1/3tel von der gewollten Site. Ein bisschen habe ich irgendwie etwas zusammengebastelt, aber: es sind Fehler in der css in der Form, dass ich die Gridtemplates mit falschen Einheiten benannt habe. % statt fr, etc... . Das wollte ich nun korrigieren und zusätzlich einen footer einbauen, da ich den " Datenschutz vergessen habe.

.container
	{ 	
		height: 100vh;	
		display: grid; 
		    grid-template-columns: 0.5fr 1.3fr  0.5fr 5fr 0.5fr;
  		  grid-template-rows: 15% 6% 1%  auto  1% 3%
   }

/grid-template-rows:15vh 7vh 1vh auto 1vh 5vh; damit funktioniert das Design gar nicht!/

Bisher funktionierte die Website so, wie sie soll. ( ist ja online) Aber, nachdem ich die Einheiten verändert habe ( das Design ist unverändert geblieben) unter <section> item1 aus dem item- Verbund ( 1-7) gelöst habe, geriet alles ins Wanken. Der Inhalt von item1 scheint gar nicht mehr in dem Gridfenster zu liegen.

Der Quelltext: ** html**

<section>
	<div  class="verticalmenue">
		<div class="item1"><h2>Jahreslosung 2021</h2>
			<h3>Seid barmherzig, wie auch euer Vater barmherzig ist. Lukas 6,36</h3></div>
		<div class="item2"><a href="gottesdienste.htm">Gottesdienst</a></div>
		<div class="item3"><a href="'gemeindebrief.htm">Gemeindebrief</a></div>
		<div class="item4"></div>
		<div class="item5"><a href="bereichweissandt.htm">Pfarrbereich<br> Weißandt- Gölzau</a></div>
		<div class="item6"><a href="bereichgoerzig.htm">Pfarrbereich<br> Görzig</a></div>
		<div class="item7"><a href="bereichwoerbzig.htm">Pfarrbereich<br> Wörbzig</a><br><br>
		<a href="bereichwoerbzig.htm">Pfarrbereich <br>Gröbzig</a><br><br>
		<a href="bereichwoerbzig.htm">Pfarrbereich <br>Preußlitz</a></div>
	</div>
  </section>

**.css **

section 
	{ 
		border: 1px solid black;
		border-radius: 10px;
		margin-top:0;
		background: linear-gradient(90deg, #8B008B, #551a8b);
 		 grid-column-start:2; 
 		 grid-column-end:3; 
 		 grid-row-start:1; 
 		 grid-row-end:6; 
		
	} 
.verticalmenue
	{
		
		border: 3px solid yellow; /* nur zur Kontrolle*/
		width: 1.3fr;
		display: flex;
		flex-direction: column;
		margin-top: 0;
		padding-left:1em; 
		flex-wrap: wrap;
		position: fixed;
			
	}
**.item1
	{
		color: snow;
		text-align: center;
		padding: 2em 0.5em 2em 0;	
			
	}**
.item1 h2
	{
		font-size: 1.5vw;
	}
.item h3
	{
		font-size: 1vw;
		
	}
.item2,
.item3,
.item4,
.item5,
.item6,
.item7 

	{
		color: white;
		font-weight: bold;
		/*background: silver;*/
		padding-top:1em;
		font-size: 1.5vw;
	} 
.item2 
	{
		color: green;
	}
.item1 a  , .item2 a , .item3 a , .item5 a , .item6 a , .item7 a
	{
	           	color: white;
		text-decoration: none;	
	}
a:hover, 
a:focus 
	{
  		color: wheat;
  
	} 
.item4 
	{
		flex-grow: 0.2;
			
	}
.item5 
	{
		hyphens: auto;
	}

Zudem: Der Text von item1 bricht weder um durch "flex-gap: gap;" noch hält er sich an die Grenzen des Grid-Rasters. Einfach nur lästig.

Was mache ich ( außer "Alles" falsch?) Könnt Ihr mir bitte helfen?

Herzlichen Dank sagt keineahnung