Fix text to follow portuguese language syntax (#18481)

curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.portuguese.md

@@ -7,10 +7,13 @@ localeTitle: Alinhar elementos usando a propriedade justify-content
 ---
 
 ## Description
-<section id="description"> Às vezes, os itens flexíveis dentro de um contêiner flexível não preenchem todo o espaço no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os itens flexíveis de uma determinada maneira. Felizmente, a propriedade <code>justify-content</code> possui várias opções para fazer isso. Mas primeiro, há alguma terminologia importante para entender antes de rever essas opções. <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aqui está uma imagem útil mostrando uma linha para ilustrar os conceitos abaixo.</a> Lembre-se de que definir um contêiner flexível como uma linha coloca os itens flexíveis lado a lado da esquerda para a direita. Um conjunto de contêiner flexível como uma coluna coloca os itens flexíveis em uma pilha vertical de cima para baixo. Para cada um, a direção em que os itens flexíveis são organizados é chamada de <strong>eixo principal</strong> . Por uma linha, esta é uma linha horizontal que corta cada item. E para uma coluna, o eixo principal é uma linha vertical através dos itens. Existem várias opções de como espaçar os itens flexíveis ao longo da linha que é o eixo principal. Um dos mais usados ​​é o <code>justify-content: center;</code> , que alinha todos os itens flexíveis ao centro dentro do contêiner flexível. Outras opções incluem: <ul><li> <code>flex-start</code> : alinha os itens ao início do contêiner flexível. Para uma linha, isso empurra os itens para a esquerda do contêiner. Para uma coluna, isso empurra os itens para o topo do contêiner. </li><li> <code>flex-end</code> : alinha os itens ao final do contêiner flexível. Para uma linha, isso empurra os itens para a direita do contêiner. Para uma coluna, isso empurra os itens para o fundo do contêiner. </li><li> <code>space-between</code> : alinha itens ao centro do eixo principal, com espaço extra colocado entre os itens. O primeiro e o último item são empurrados para a borda do contêiner flexível. Por exemplo, em uma linha, o primeiro item está contra o lado esquerdo do contêiner, o último item está contra o lado direito do contêiner e, em seguida, os outros itens entre eles são espaçados uniformemente. </li><li> <code>space-around</code> : semelhante ao <code>space-between</code> mas o primeiro e último itens não estão bloqueados para as bordas do contêiner, o espaço é distribuído em torno de todos os itens </li></ul></section>
+<section id="description"> Às vezes, os itens flexíveis dentro de um contêiner flexível não preenchem todo o espaço no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os itens flexíveis de uma determinada maneira. Felizmente, a propriedade <code>justify-content</code> possui várias opções para fazer isso. Mas primeiro, há alguma terminologia importante para entender antes de rever essas opções.
+<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aqui está uma imagem útil mostrando uma linha para ilustrar os conceitos abaixo.</a>
+Lembre-se de que definir um contêiner flexível como uma linha coloca os itens flexíveis lado a lado da esquerda para a direita. Um contêiner flexível definido como uma coluna coloca os itens flexíveis em uma pilha vertical de cima para baixo. Para cada um, a direção em que os itens flexíveis são organizados é chamada de <strong>eixo principal</strong> . Para uma linha, esta é uma linha horizontal que corta cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através dos itens.
+Existem várias opções de como espaçar os itens flexíveis ao longo da linha que é o eixo principal. Um dos mais usados é a <code>justify-content: center;</code> , que alinha todos os itens flexíveis ao centro dentro do contêiner flexível. Outras opções incluem: <ul><li> <code>flex-start</code> : alinha os itens ao início do contêiner flexível. Para uma linha, isso empurra os itens para a esquerda do contêiner. Para uma coluna, isso empurra os itens para o topo do contêiner. </li><li> <code>flex-end</code> : alinha os itens ao final do contêiner flexível. Para uma linha, isso empurra os itens para a direita do contêiner. Para uma coluna, isso empurra os itens para o fundo do contêiner. </li><li> <code>space-between</code> : alinha itens ao centro do eixo principal, com espaço extra colocado entre os itens. O primeiro e o último item são empurrados para a borda do contêiner flexível. Por exemplo, em uma linha, o primeiro item está contra o lado esquerdo do contêiner, o último item está contra o lado direito do contêiner e, em seguida, os outros itens entre eles são espaçados uniformemente. </li><li> <code>space-around</code> : semelhante ao <code>space-between</code> mas o primeiro e último itens não estão encostados às bordas do contêiner, o espaço é distribuído em torno de todos os itens </li></ul></section>
 
 ## Instructions
-<section id="instructions"> Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS <code>justify-content</code> ao elemento <code>#box-container</code> e atribua a ela um valor de center. <strong>Bônus</strong> <br> Tente as outras opções para a propriedade <code>justify-content</code> no editor de código para ver suas diferenças. Mas note que um valor de centro é o único que passará este desafio. </section>
+<section id="instructions"> Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS <code>justify-content</code> ao elemento <code>#box-container</code> e atribua a ela um valor de *center*. <strong>Bônus</strong> <br> Experimente as outras opções na propriedade <code>justify-content</code> no editor de código para ver suas diferenças. Mas note que um valor de *center* é o único que passará este desafio. </section>
 
 ## Tests
 <section id='tests'>