'How to position row of divs?

I'm currently working on a page that displays cards. My final row of cards has two cards centered because of my parent class text-align center. I am trying to manipulate the css for it start on the left side instead of centered. I've tried using text-align left in the div class but it only shifts the actual text in the card rather then the card itself. I've also tried setting my div with col-md-3 but that shifted the spacing to far to the left.

I managed to get my desired look if I use two empty divs in order to push fill in the space.

Current look I'm trying to fix

here is my HTML code

                   <div class="card-panel">
                                    <div class="state">
                                           <svg class="icon icon-state-WI">
                                            <use xlink:href="#icon-state-WI"></use>
                                            </svg>
                                        </div>
                                    <div class="description-block">
                                        <h3>Wisconsin</h3>     
                                    </div>
                                </div>
                                <div class="card-panel">
                                    <div class="state">
                                           <svg class="icon icon-state-WY">
                                            <use xlink:href="#icon-state-WY"></use>
                                            </svg>
                                        </div>
                                    <div class="description-block">
                                        <h3>Wyoming</h3> 
                                    </div>
                                </div>

css for card-panel and description block

.card-panel {
    background: #fefefe;

    border: 1px solid #d8ddea;

    box-shadow: 0 1px 3px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.14);

    border-radius: 5px;

    position: relative;

    display: inline-table;

    box-sizing: border-box;

    width: 360px;

    height: 135px;

    margin: 5px;

}

.description block {
position: relative;

display: inline-table;

text-align: left;

top: 15px;

padding-left: 75px;
}
htmlcss


Solution 1:[1]

If your divs have display:inline or inline-block then just add text-align:left; to parent.
If div displays are flex: use margin-right:auto in divs. Hope it helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Royal_MGH

Related Questions