Becky Becky - 5 months ago 9
CSS Question

Container not taking an auto margin

I am having a difficult time with a margin issue. Basically I have 4 boxes displayed inline.

I have the boxes themselves and then an internal container

.connect-box-wrap
. What I am trying to do is to get the horizontal margin for the
.connect-box-wrap
to be auto, so the start of the content is around the middle point of the box, making the
#contact-connect
appear more centered. Right now it looks as if the internal container is aligned left and not taking the
margin: 0 auto;
.

I am wanting the text to still be aligned left...I just want the internal container to have the horizontal auto margin.

Any ideas?

Fiddle

Here is what it looks like now (paint image showing borders, if it had them).

boxes now

What I want this to look like is this:

I want it to look like this

This is a summary of the code, see the fiddle for the full code for all four 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>

Answer

Add a width to the .connect-box-wrap, such as width:80%. Otherwise it will default to 100% width and the margin:0 auto won't do anything.

Comments