Buttons not aligning to center (HTML / CSS)

Question

I am currently making a website for a game that a friend is making. I am using materialize for many parts of the website such as buttons for social media. My problem is that I am trying to align all my buttons in the center of the screen but they are not centering and are moving slightly from left to right when I change resolution. Here is the code:

<div class="row">
  <div class="col s12 m4 l8" align="middle">
      <a class="waves-effect waves-light btn-large #212121 grey darken-4">Download</a>
      <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="https://discord.gg/xRqFGEK">Discord</a>
      <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="http://www.twitter.com/playparadon">Twitter</a>
      <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="http://www.instagram.com/playparadon">Instagram</a>
  </div>
</div>

CSS:

 col s12 m4 l8{
  display: flex; justify-content: center;
}

Result

Any help would be greatly appreciated!

Answer 1

you can simply use .push-l3 on large screen and play with the rest.

like

<div class="container">
        <div class="row">
            <div class="col s12 m4 l8 push-l3">
            <a class="waves-effect waves-light btn-center btn-large #212121 grey darken-4">Download</a>
            <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="https://discord.gg/xRqFGEK">Discord</a>
            <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="http://www.twitter.com/playparadon">Twitter</a>
            <a class="waves-effect waves-light btn-large #212121 grey darken-4" href="http://www.instagram.com/playparadon">Instagram</a>
            </div>
        </div>
    </div>

Answer 2

The selector for that should be

.col.s12.m4.l8 { ... }

(leading dots for the classes, and no spaces in between, since all these classes belong to the same element)

Answer 3

https://jsfiddle.net/jgrishey/fgw2ho5f/

Seems to work here when you have . in front of your classes in the CSS.

Just to give a little information:

. and # are used to identify classes and id's respectively in CSS.

If your element has an id="myId" or a class="myClass" then you refer to that element as:

.myClass {}

or

#myId {}

Answer 4

Try adding . to your selectors, in the CSS. So .col, .s12, etc.

More info. on this: https://www.w3schools.com/cssref/sel_class.asp