CSS Editando menu superior com CSS

[BlackM00n_]

Olá pessoal,

 

estou iniciando os estudos em desenvolvimento web e o site que quero fazer possui um menu superior com um link chamado "minha conta", mas não consigo deixar as duas palavras uma ao lado da outra e por isso o menu fica feio. Gostaria de saber como deixar as duas palavras na mesma linha. Segue imagem do menu.

 

Abaixo o código HTML e o CSS

.menu_dir{
	float: right;
	margin-right: 10px;
}

.menu{
	width:100%;
	height:100px;
	background-color: #3a9ed1;
	font-family:'arial';
	
}

.menu ul{
	list-style:none;
	position:relative;
	z-index: 1;
}

.menu ul li{
	width: 150px; /*tamanho da barra do menu*/
	float:left;
}

.menu a{
	padding:40px;
	display:block;
	font-size: 22px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	background-color: transparent;
	color: #fff;

}

<nav class="menu">
	<ul>
		<li><a>T040</a></li>
		<li><a href="index.php">Home</a></li>
		<li><a href="sobre.php">Sobre</a></li>
		<nav class="menu_dir">	
			<li><a href="myacc.php">Minha Conta</a></li>
			<li><a href="logout.php">Sair</a></li>
		</nav>
	</ul>
</nav>

 

Agradeço a quem puder me ajudar

[washalbano]

Olá!
O que acontece é que a largura de 150px é insuficiente para que caibam as duas palavras, lado a lado.

12 horas atrás, BlackM00n_ disse:

width: 150px; /*tamanho da barra do menu*/

Troque aquele width por min-width

[BlackM00n_]

@washalbano Muito obrigada!