How to align last row to the left with CSS?

Asked Jan 23 '17 at 11:50

Active Jan 23 '17 at 11:50

Viewed 51 times

I have the following code:

<div class="region-table-container">
    <div class="region-table-value"</div>
</div>

With the following CSS:

.region-table-container {
        margin: 0 auto;
        width:400px;
    }

    .region-table-value {
        width: 32%;
        color: #7f8585;
        font-size: $font-size-x-small;
        font-weight: 700;
        line-height: 26px;
        text-transform: uppercase;
        display: inline-block;
        text-align: left;
    }

and the result is that the last row (NY / FL) is not aligned to the left as the rest of the names (see image).

How to fix this please?

Thanks.

asked Jan 23 '17 at 11:50

badigard

use display:inline-block – Hemant Jan 23 '17 at 11:52
1

Please provide complete code or create a fiddle. – Mohammad Usman Jan 23 '17 at 11:52
How is created that table? Looks more like a estructure issue than an aligment issue. – LordNeo Jan 23 '17 at 11:56
post your complete code. With your pasted fragment it works well. See http://codepen.io/anon/pen/rjwNxq – Massimo Petrus Jan 23 '17 at 11:57
let me see your code ?? – Sohail Khan Jan 23 '17 at 12:25
I pasted all I have got. The table is created when I add 'display:inline-block' to child element. I am trying to have 3 columns at most. Its strange that it works in the codepen sample..... – badigard Jan 23 '17 at 12:46

How to align last row to the left with CSS?

0 Answers0