i having difficult time margin issue. have 4 boxes displayed inline.
i have boxes , internal container .connect-box-wrap. trying horizontal margin .connect-box-wrap auto, start of content around middle point of box, making #contact-connect appear more centered. right looks if internal container aligned left , not taking margin: 0 auto;.
i wanting text still aligned left...i want internal container have horizontal auto margin.
any ideas?
here looks (paint image showing borders, if had them).
what want this:
this summary of code, see fiddle full code 4 boxes.
#contact-connect { width: 80%; height: auto; margin: 0 10%; padding: 80px 0; } #contact-connect-box-container { margin: 0 auto; width: auto; } .contact-connect-box { width: 25%; margin: 60px 0 0 0; display: inline-block; /*border: 1px solid black;*/ vertical-align: top; opacity: 0; transition:1s; -webkit-transition:1s; } .connect-box-wrap { margin: 0 auto; } <div id="contact-connect"> <div id="contact-connect-box-container"> <div class="contact-connect-box"> <div class="connect-box-wrap"> <h2 class="contact-connect-title">a</h2> <div class="contact-connect-description"><a href="tel:3304888300">555.555.5555</a></div> </div> </div> </div> </div> </div> </div>
add width .connect-box-wrap, such width:80%. otherwise default 100% width , margin:0 auto won't anything.
