Column Names not quite centering

I have the correct columns names appearing, but have a hard time getting them to actually center on each puzzle piece.

Column names out of center
The CSS I created is here.

puzzle-canvas.component.css
.column-number {
    width: 12%;
    margin-top: 12px;
    float: left;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    z-index: 10;
}

Open in new window


The single line I added to the template is:

puzzle-canvas.component.html
    <div class="column-number" *ngFor="let i of columnNames" >{{ i }}</div>

Open in new window

newbiewebSr. Software EngineerAsked:
Who is Participating?
 
Leonidas DosasConnect With a Mentor Commented:
Try to set at CSS at  .column-number:
margin-left: 20%;

Open in new window

or
padding-left: 20%;

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
Neither worked...

Margin left
Margin left
Padding left
Padding left
0
 
newbiewebSr. Software EngineerAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.