To add to the above, Materialize uses a grid system similar to what we learned about Bootstrap in the Free Code Camp challenges. The grid system determines the width of your cards, so when you do this in your CSS:
You are giving specific widths and overriding the CSS framework’s responsive design. This override is causing some conflicts and giving you the unexpected results you see. Furthermore, you are referencing all of your cards with a single ID, but IDs in HTML need to be unique.
If you want to let Materialize make your cards responsive across all screen sizes, remove your CSS and use the Materialize grid with column offsets to keep your cards centered. http://materializecss.com/grid.html#grid-offsets
col s8 m4 to
col s10 offset-s1 m6 l4.
Otherwise, keep your CSS as is but make the cards have
display: inline-block and assign a class to each of your cards, replacing
#projectCard with that class name.