Div's wont align to center


I have a div which contains several other div’s and I am trying to center them so there isn’t a huge gap on the right(see image)
I have tried margin: 0 auto & display:block but I can’t get all the div’s to align into the center.
Code below image

I am adding each card(from materialize) with javascript into a div:
<div id="projects" >
<div class="row" id="projectRow">
Card code:
<div class='col s8 m4' id='projectCard'><div class='card blue-grey darken-1'><div class='card-content white-text'><span class='card-title'>"+ json[i].name +"</span><p>"+ json[i].description +"</p></div><div class='card-action'><a href='"+ json[i].repository +"'>Repository</a></div></div>

width: 483.888px;
height: 210.700px;
max-width: 483.888px;
max-height: 210.700px;
text-align: center;

How would I be able to align these into the center


are you doing this in codePen?


If you have this up live it would help to share the link… the problem may be that you’re focused on just the styles for projects and projectCard that you posted here for us to see,when the problem may be (probably is) somewhere else entirely.


Is this what you are trying to do ?


@nr-mihaylov Yes, That was what I was trying to do. How did you manage to do that?


@cndragn If you want to take a look at the rest of the code, it’s here: https://github.com/AcornHack/Acorn-Connect-Academy/tree/frontend


Add the container class to the tag with the projects id and remove those width and height properties from the cards.


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:

#projectCard {
  width: 483.888px;
  height: 210.700px;
  max-width: 483.888px;
  max-height: 210.700px;

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

Try changing 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.