It’s aligning the immediate child of the container I.e class buttons, you can either change the flex container to the class buttons or take out class buttons and let the immediate childs of the class container be the buttons. Also you may want to give the flex container some width.
Are you using some kind of CSS framework such as Bootstrap? You will have to make sure that you CSS overrides the CSS of the framework by importing you custom CSS file after the CSS framework. Like this:
I don’t quite understand what you are wanting to do, the flex alignment you have now is acting on .buttons div, if you take out that div then the alignment will act on the buttons, justify-content always acts in the flex direction of the container (in your case row) , align-items acts in the orthogonal direction (column in your case) of the flex-direction, perhaps you are wanting justify-content: space-around ? like this below (green is your current container area, I gave the container some height) https://codepen.io/Dee73/pen/KYLEpR