Estou com um probleminha na exibição do meu site, criando um Sistema de Postagem, até ai tudo certo, porém quando coloquei um echo usando o PHP para exibir o bloco article contendo todo o conteúdo, ele não está se adaptando assim como o resto, e estou usando o Viewport do HTML
HTML e PHP
<main id="areaPrincipal">
<?php
echo "
<article class='postagemComercio'>
<header>
<h2>Meu Comércio</h2>
</header>
<figure>
<img src='pics/ui/bannerDestaque.png'>
<figcaption>
<span class='infoPostagem'>Comerciante: Avily Silva<br>Dia: 00/00/00</span><br>
<p>Aqui você deve inserir uma pequena descrição falando um pouco sobre seu comércio e produtos que estarão em destaque.</p>
<ul>
<li>Produto1:2</li>
</ul>
</figcaption>
</figure>
</article>
<article class='postagemComercio'>
<header>
<h2>Meu Comércio</h2>
</header>
<figure>
<img src='pics/ui/bannerDestaque.png'>
<figcaption>
<span class='infoPostagem'>Comerciante: Avily Silva<br>Dia: 00/00/00</span><br>
<p>Aqui você deve inserir uma pequena descrição falando um pouco sobre seu comércio e produtos que estarão em destaque.</p>
<ul>
<li>Produto1:2</li>
</ul>
</figcaption>
</figure>
</article>
";
?>
</main>
CSS
main#areaPrincipal {
padding:10px;}
/* Postagem de Comércio */
article.postagemComercio {
box-shadow:0px 5px 10px rgba(0,0,0,.1);
border-radius:5px;
margin:5px;padding:10px;
overflow:hidden;
/*height:300px;*/}
article.postagemComercio header {
border-bottom:solid 1px rgba(0,0,0,.1);}
article.postagemComercio header h2 {
margin:10px;padding:0;
font-size:16pt;font-weight:normal;}
/*article.postagemComercio:hover {
height:auto;}*/
article.postagemComercio figure {
margin:0;padding:5px;}
article.postagemComercio figure img {
width:100%;}
article.postagemComercio figure figcaption {
margin:0;padding:5px;
font-size:11pt;}
Vejam a imagem
