Give the <article> a class, then style that class in main.css.
When using defining a float:left or :right rule, a width:__ must also be defined. And, in some browsers, adding a margin around each side of the figure will control the gaps between each.
Stretch the browser window wider and skinnier to see how the figures sit side-by-side in sets of 1, 2, or 3. The more figures you display, the more variation in the orientation of the figures. Define a width that allows it to be responsive to changes in the browser width. You'll notice some gaps appear where you might not want them, so be sure to move the <figure> tags around, so they fit nicely.