space between boxes

[mindapolis]

Hi, on http://theascentguide.com/test/ can someone please help me understand why I can't put space between the boxes?  Also, when the boxes flip I can't get them to be the same height.  I have tried everything I know but nothing is working.  Some help would be very much appreciated.  

}
57

58
.flip3D:hover > .back{
59
  transform: perspective(600px) rotateY(0deg);
60
  -webkit-transform: perspective(600px) rotateY(0deg);
61
}
62

63
#contactUs {
64
  clear:left;
65
  background-color:#79A696;
66
  height:80px;
67
  width:210px;
68
  
69
  margin-top:120px;
70
  margin-left:auto;;
71
  margin-right:auto;
72
  border-radius:50%;
73
  text-align:center;
74
  color:#ffffff;
75
  font-family:'Chivo', sans-serif;
76
  font-size:24pt;
77
}
78
#footer-core {
79
  text-align:center; 
80
}
81
#header-core {
82
  display:none;
83
}
84
#sub-footer {
85
  display:none;
86
}
87

88
flip3D > .front {
89
    display: block;
90
    margin-left: 56px;
91
    position: relative;
92
    transform: perspective(600px) rotateY(0deg);
93
    background: #79A696;
94

    width: calc;
95
    min-height: 250px;
96
    border-radius: 7px;
97
    backface-visibility: hidden;
98
    font-size: 24pt;
99

    vertical-align: middle;
100
   }

 

[requinix]

You've got a lot of styling going on. A lot that needs to be pruned.

Demo

[mindapolis]

I redid some of it but it didn't help.  

#mainText {
	margin-left:15px; 
	margin-top:5px;

}
.front {
	display:block;
	position:relative;
	min-height:255px;
}
.flip3D {
	width:305px;
	height:255px;
	float:left;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:150px
}


.flip3D > .front {
	margin-right:5px;
	position:absolute;
	transform:perspective(600px) rotateY(0deg); 
	-webkit-transform:perspective(600px) rotateY(0deg);
background:#79A696;width:305px; height:22px;/*won't change height.*/ 
	border-radius:7px;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	font-size:24pt;
	
}

.flip3D > .back {
	margin-right:5px;
	position:absolute;
    transform:perspective(600px) rotateY(180deg); 
	-webkit-transform:perspective(600px) rotateY(180deg); 
    background:black; width:305px; 
	height:225px; /*change the box height*/
	border-radius:7px;
	padding:10px;
	color:#ffffff;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
}

.flip3D:hover > .front{
	transform: perspective(600px) rotateY(-180deg);
	-webkit-transform: perspective(600px) rotateY(-180deg);
}

.flip3D:hover > .back{
	transform: perspective(600px) rotateY(0deg);
	-webkit-transform: perspective(600px) rotateY(0deg);
}

#contactUs {
	clear:left;
	background-color:#79A696;
	height:80px;
	width:210px;
	
	margin-top:120px;
	margin-left:auto;;
	margin-right:auto;
	border-radius:50%;
	text-align:center;
	color:#ffffff;
	font-family:'Chivo', sans-serif;
	font-size:24pt;
}
#footer-core {
	text-align:center; 
}
#header-core {
	display:none;
}
#sub-footer {
	display:none;
}

#footer-core h3.footer-widget-title {
  display: none;
}

 

[requinix]

You still have a lot of styling going on. Margins. Padding. Widths and heights. A stray <p>. A flip3D inside an infoBox. The contactUs in there as well. They all contribute to messing up alignment.

There should be one container for the three visual boxes (your flip3D), and each of those boxes contains the front and back panels. Those two panels should not have any margins. The flip3D boxes should only have enough margin to space them apart from each other, and you'd to that with a .flip3D+.flip3D { margin-left: whatever }. Everything else, like the contact us button, belong outside of all this.

Rearrange the markup and try this: forget all the styles you've applied, copy what I did in the demo, then add colors and formatting and padding (to the front/back panels) and that margin-left to go towards your end result.

[mindapolis]

 

Am I understanding it right.  there should be only one flip3D container?  

[requinix]

Each front+back pair needs a flip3D container so that the two can be placed on top of each other.

main container ( flip container 1 ( front + back ) + flip container 2 ( front + back ) + flip container 3 ( front + back ) )

[mindapolis]

okay things are going better but the .flip3D+.flip3D {margin-left:5px isn't doing anything.  

[requinix]

Well, you've made it worse. You now have a couple extra <p>s in there, which will prevent the .flip3D+.flip3D from doing anything, and you still aren't wrapping them all in a container that's dedicated to just those three boxes.

Forget your code for a while. Look at my demo. Learn what it does and how it works. Understand what the containers are for and what effect the CSS has. Then apply what you've learned by adjusting your HTML and CSS to match.

You will not fix your problem by adding even more HTML and CSS into the mix. You have too much as it is.

[mindapolis]

I'm sorry but I don't see any <p> tags.  

[requinix]

<p><!--End of flip3D container --></p>