Оболочка неправильно отображает содержимое

У меня есть небольшая проблема с моим сайтом, которую я должен закончить для школьного проекта. У меня есть php-код внутри обертки, который я пытаюсь отобразить встроенным способом, который он делает сейчас, но контент просто становится меньше и на самом деле не складывается.
Содержимое в обертке повторяется и должно быть рядом друг с другом до тех пор, пока не останется свободного места, а затем оно должно идти под первым. Я надеюсь, вы понимаете, что я имею в виду :). Любая помощь приветствуется.

HTML

 <section class="wrapper">
<?php
foreach ($armbond as $entry)
{
echo "<div class='box'> " . "name: " . $entry[0] . "." . " " . "<br> inforamtion: " .  $entry[2] . "." . '<br> <img src="' . $entry[1] . '" style="width:304p"' .'">'. " " . "<br> price: " .  $entry[3] . "</div> ";
}
?>
</section>`

CSS

.wrapper{
display: flex;
flex-flow: row-wrap;
}

.box{
background: silver;
margin:2px;
height: 150px;
width: 300px;
}`