Problem z tekstem wychodzącym poza nav-a

Question

Witam serdecznie, jak w tytule mam kłopot z menu. https://zapodaj.net/36f8a60d0835d.png.html chciałbym by w takim przypadku gdy li wychodzi poza ul, po prostu to Li które wychodzi zostało przeniesione na dół.

Tu jest CSS menu 

#menu
{
	max-width:100%;
	display:flex;
	text-align:center;
	font-size:2.6rem;
	min-height:65px;
	max-height:760px;
	background-color:#4343E6;
	-webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
}
#menu li
{
	display:block;
	position:relative;
	width:200px;
	list-style:none;
	word-wrap: break-word;
	line-height:65px;
	float:left;
	
}
#menu ul
{
	width:100%;
	text-align:center;

}
#menu a 
{
	display:block;
	color:black;
	text-decoration:none;
	letter-spacing:0px;
	color:white;
	font-style:italic;
	transition:0.6s;
	filter: brightness(100%);
}
#menu .active
{
		background-color: rgba(0,0,0,0.2);
	filter: brightness(50%);
}
#menu a:hover
{
	background-color: rgba(0,0,0,0.2);
	filter: brightness(50%);

}

#menu ul li
{
	left:20%;
	color:red;
}

a tu HTML - najprostsze na świecie 

	<nav id="menu">
		<ul>
			<li><a class="a active" href="#">Patron</a></li>
			<li><a class="b" href="#">Location</a></li>
			<li><a class="c" href="#">About School</a></li>
			<li><a class="d" href="#">Gallery</a></li>
			<li><a class="f" href="#">Contact</a></li>
			<li><a class="g" href="#">History</a></li>
		</ul>
	</nav>

 

Comments

#menu ul li
{
    left:20%;
    color:red;
}

do czego to ma służyć? bez tego powinno działać tak, jak chcesz

Answer 1

Przerobiłem trochę Twój przykład, wystarczy że dostosujesz pod siebie ;) na flexie tak jak robiłeś.

https://codepen.io/alterwar/pen/VMEzpY

Comments

Dzięki działa

Answer 2

Skoro używasz flexa zastosuj 

flex-wrap: wrap;