Olá Pessoal, estou com dúvida, pois o segundo parágrafo do tópico Experiência "estoura" e a sua última linha vai para baixo do blockquote. Obrigado! Vou fazer upload do imagem. link da imagem ---->http://pasteboard.co/4XPy6gsoE.jpg
insira seu código aqui
```<!DOCTYPE html>
<html>
<head>
<header class="pagina-inicial cabecalho-principal">
<title>Biografia - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="bio.css">
</header>
</head>
<body>
<main>
<h1>Sobre mim</h1>
<div>
<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, durabilidade e que agregam valor para meus clientes.
Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>
<h2>Como trabalho</h2>
<blockquote class="pistola">
<p> João da Silva é o melhor desenvolvedor front-end com que já trabalhei.</p>
<cite>Pistola Loser</cite>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.</p>
<p><strong>Também não trabalho com prazos fechados</strong>: qualidade é importante demais para ser sacrificada.</p>
<h2>Experiência</h2>
<blockquote class="petronio">
<p> João da Silva domina as tecnologias como ninguém, é um homem besta lol.</p>
<cite>Petrônio da Sugadora</cite>
</blockquote>
<p class="desenvolvi">Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br" target="_blank">UOL<a> e <a href="http://www.ibm.com" target="_blank">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
<h2>Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
</div>
</main>
<img src="eu.jpg" alt="Foto de João da Silva">
<aside class="navegacao-site">
<div class="chato">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="portfolio" href="portfolio.html">Portfólio</a></li>
<li><a class= "mim" href="bio.html">Sobre Mim</a></li>
<li><a class= "blog" href="blog.html">Blog</a></li>
<li><a class= contato" href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
<ul class="icones-sociais">
<li><a class="github" href="https://github.com/">Github</a></li>
<li><a class="twitter" href="https://twitter.com/">Twitter</a></li>
<li> <a class="linkedin" href="https://www.linkedin.com/">Linkedin</a></li>
</ul>
</aside>
<footer>
© João da Silva 2017
<ul class="icones-sociais social-rodape">
<li><a class="github" href="https://github.com/">Github</a></li>
<li><a class="twitter" href="https://twitter.com/">Twitter</a></li>
<li> <a class="linkedin" href="https://www.linkedin.com/">Linkedin</a></li>
</ul>
</footer>
</body>
</html>insira seu código aqui ```body {
font-family: "Times New Roman", serif; background-color: #F2FFFC; font-size: 120%; line-height: 1.5; }
title {
background-color: #851944; padding: 25px;
}
main h1 {
font-size: 60px; background-color: rgb(120,30,60); color: #FAFFFA; text-align: center; font-family: "Open Sans"; padding: 25px; margin: 0px; border-bottom-style: solid; border-bottom-width: 10px; border-bottom-color: black; font-size: 60px; text-transform: uppercase; }
h2 {
font-size: 48px; font-family: "Open Sans", sans-serif; clear: both; }
p {
text-align: justify; margin: 20px 0;
}
blockquote {
background-color: #D9E5E3; padding: 16px; border-color: #C2CCCA; border-style: solid; border-width: 10px; border-bottom-color: #333; border-right-color: #FFF; width: 250px; margin: 0px; box-sizing:border-box; margin: 20px 40px; }
.navegacao-site { background-color: #3C1D3D; color: #F2FFFC; padding: 20px; text-align: center; }
footer { background-color: #000; color: #F2FFFC; padding: 20px; }
nav a { color: #F2FFFC; text-transform: lowercase; }
main a {
color: #851944;
}
aside a { color: inherit; font-family: "Open Sans Condensed", sans-serif; }
aside h1 {
font-size: 30px; margin-bottom: 25px;
}
div {
width:720px; margin-left: auto; margin-right: auto;
}
main div {
padding: 20px 0;
}
em {
font-style: italic; }
strong {
font-weight: bold;
}
h2 {
font-size: 30px;
}
.icones-sociais li {
display: inline-block; height: 60px;
}
.social-rodape { margin: 60px;
}
article {
padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 20px;
}
.leia-mais{
padding: 8px; margin: 16px; display: block; font-size: 24px; text-align: center; background-color: #E6E7E8; }
.pagina-inicial {
font-size: 60px; }
.cabecalho-principal {
color: white; background-color: purple; }
.icones-sociais a { width: 40px; height: 40px; display: inline-block; text-indent: -9999px; }
.github {
background-image: url(github.png); }
.twitter { background-image: url(twitter.png);
}
.linkedin { background-image: url(linkedin.png);
}
.pistola { float: right;
}
.petronio { float: left; }
aside,img { float: right; width: 15%; box-sizing: border-box; border-left: 10px solid black; border-bottom: 10px solid black; }
aside { clear: right;
}
main {
float: left; width: 85%; }
footer { clear: both;
}
.chato {
position: relative; left: 0px; display: inline-block; width: 100px; }
cite {
font-style: italic; float: right; display: block; }
