Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

A foto fica no local certo, mas o menu fica no lado esquerdo alinhado com a base da foto

//Esse é o css

insira seu código aqui
```body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid black;
    font-size: 60px;
    text-transform: uppercase;
}

insira seu código aqui ```

h2 { font-size: 30px; clear: both; }

p { text-align: justify; margin: 20px 0; }

blockquote { background-color: #D9E5E3; border: 10px solid #C2CCCA; width: 250px; box-sizing: border-box; margin: 20px 40px; }

aside { background-color: #3C1D3D; color: #F2FFFC; }

nav a { color: #F2FFFC; }

main a { color: #851944; }

aside a { color: inherit; font-family: "Open Sans Condensed", sans-serif; }

blockquote, aside, footer { padding: 20px; }

main .conteiner { width: 720px; margin: auto; padding: 30px 0; padding-bottom: 80px; }

strong { font-weight: bold; }

em { font-style: italic; }

aside h1 { font-size: 30px; margin-bottom: 25px; }

.icones-sociais li { display: inline-block; }

rodape-pagina {

background-color: #000; color: #F2FFFC; clear: both; position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; }

.posts { padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-right: 20px; }

.navegacao-site { text-align: center; background-color: #3C1D3D; color: #F2FFFC; padding: 20px; width: 15%; box-sizing: border-box; border-left: 15px solid black; border-bottom: 15px solid black; position: relative; top: 310px; }

.leia-mais { padding: 8; margin: 16px; display: block; font-size: 24px; text-align: center; background-color: #E6E7E8; }

.icones-sociais a { width: 40px; height: 40px; display: inline-block; text-indent: -99999px; }

.github { background-image: url("github.png"); }

.twitter { background-image: url("twitter.png"); }

.linkedin { background-image: url("linkedin.png"); }

.fiat{ float: right; }

.petrobras { float: left; }

.autor { display: block; font-style: italic; float: right; }

.fotojoao { border-left: 15px solid black; border-bottom: 15px solid black; width: 300px; position: absolute; top: 0; right: 0; box-sizing: border-box; }

main { float: left; width: 85%; }

.nome-navegador { text-transform: uppercase; }

2 respostas
solução!

Olá Daniloz

Não consegui rodar seu HTML (falta algumas coisas rss) , se quiser ajuda mande novamente ou coloque seu código em algum site on line como este https://codepen.io/ (faça o cadastro) e envie aqui para poder lhe ajudar ;)

Na sua classe "navegacao-site", você está usando:

position: relative; top: 310px;
Muda para:

position: absolute; top: 310px; right: 0;
Desse jeito funciona. ;)