Div's wont align to center

1

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.

I am adding each card(from materialize) with javascript into a div:
<div id="projects" >
<div class="row" id="projectRow">
</div>
</div>
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>

CSS:
#projectCard{
width: 483.888px;
height: 210.700px;
max-width: 483.888px;
max-height: 210.700px;
}
#projects{
text-align: center;
}

How would I be able to align these into the center

2

are you doing this in codePen?

3

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.

4

Is this what you are trying to do ?

1 Like
5

@nr-mihaylov Yes, That was what I was trying to do. Thanks

6

@cndragn If you want to take a look at the rest of the code, it’s here:

1 Like
7

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

2 Likes