Boa tarde. Estou criando um menu, mas uma barra branca fica sobreposta na logo. Gostaria de deslocar um pouco para a direita. Como fazer isso? https://pasteboard.co/HtPOgrI.png
segue abaixo o css e o html
.logo{
height: 70px;
float: left;
}
#menu {
background-color: whitesmoke;
display: block;
margin: 0;
padding: 1px 0;
list-style-type: none;
height: 31px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#menu a {
position: relative;
display: block;
margin:1px;
height: 24px;
font-size: 12px;
line-height: 24px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ccc;
color: #008d58;
}
#menu a span{
background: #5c8978;
display: block;
position: absolute;
top: 5px;
left: 8px;
width: 8px;
height: 8px;
}
#menu a:hover{
background: #008d58;
color: #bebfbf;
}
#menu li{
float: left;
margin: 1px;
padding: 0;
width: 13%;
}
<div class="titulo-descricao">
<h1>Agenda de Eventos CAV</h1>
<nav id="menu">
<ul>
<?php
if (EstaLogado()):
?>
<li><a class="sel" href="novoevento.php"><span></span>Novo Evento</a></li>
<li><a class="sel" href="meuseventos.php"><span></span>Meus Eventos</a></li>
<li><a class="sel" href="todoseventos.php">Todos os Eventos</a></li>
<?php
if ($_SESSION['admin'] == 0):
echo "<li><a class='sel' href = 'eventomoderado.php'>Eventos Moderados</a></li>";
echo "<li><a class='sel' href = 'usuariolista.php'>Usuários</a></li>";
endif;
?>
<li><a class="sel" href="locallista.php">Locais do Evento</a></li>
<li><a class="sel" href="logout.php">Logoff</a></li>
<?php
else:
?>
<li><a href="#myModal" class="trigger-btn" data-toggle="modal">Login</a></li>
<?php
endif;
?>
</ul>
</nav>