elemento estourando o tamanho e duvida com propriedade margin

Olá gente tudo bem? Estou treinando o uso do Bootstrap e juntamente praticando o CSS. Mas estou com algumas dificuldades.

Segue imagem da tela que eu montei: https://uploaddeimagens.com.br/imagens/duvida_css-png

1º Duvida: Quando passo o mouse sobre os links "sair" e "meus alunos" o tamanho do botão é maior que o tamanho do box que eu criei. Como eu poderia mudar isso?

2º Duvida: Estou tentando posicionar a tabela meus alunos ao lado do side-bar. Entretanto ele só ficar posicionado se eu utilizar a propriedade "maring-top" com valores negativos... isto seria uma má pratica, certo? Como eu poderia resolver isso?

Segue o codigo da tabela e o CSS.

Html

<div class="container posiciona-tabela">        
    <h1>Meus Alunos</h1>
    <div >
        <table class="table table-hover">
            <tr>
                <td>Nome:</td>
                <td>Creditos:</td>

            </tr>
            <?php foreach($usuarios as $usuario) : ?>
            <tr>
                <td><?=$usuario["nome"] ?></td>
                <td><?=$usuario["id"] ?></td>
            </tr>
            <?php endforeach ?>
        </table>    
    </div>    
</div>

CSS

.posiciona-tabela
{
    position:relative;
    margin-left: 300px;
    margin-top:0px;
}

Desde já obrigado pela ajuda.