Olá! Fiz as alterações em meu HTML e no CSS mas os textos não deslocam, continuam embaixo dos ícones. Segue meu código: HTML: <!DOCTYPE html>

João da Silva

©João da Silva, 2018

CSS:

body {

font-family: "Crimson Text", serif; background-color: #F2FFFC; font-size: 120%; line-height: 1.5; }

h1 { font-size: 30px; font-family: "Open Sans Condensed", sans-serif; text-transform: uppercase; }

h2 { font-size: 30px; font-family: "Open Sans Condensed", sans-serif;}

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

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

}

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

}

aside { background-color: #3C1D3D; color: #F2FFFC; padding: 20px; text-align: center; }

footer { color: #851944; padding: 20px; }

nav a { color: #F2FFFC; text-transform: lowercase; } main a { color: #851944; }

aside a { color: inherit; font-family: "Open Sans Condensed", sans-serif; font-size: 30px; margin-bottom: 25px; }

footer a { color: #851944;}

div { width: 720px; margin-left: auto; margin-right: auto; } main div { padding: 30px 0; }

strong { font-weight: bold; }

em { font-style: italic; }

.icones-redes-sociais li{

display: inline-block; }

rodape-pagina {

background-color: #000; color: #F2FFFC; padding: 20px; }

article { padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 20px; } .navegacao-site { background-color: #3C1D3D; color: #F2FFFC; padding: 20px; text-align: center; }

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

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

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