Cornerstone preview different from actual browser output?

[justinlosh]

I am designing my website with the Pro theme. I added some css that makes the site the full width of the browser, makes the section content containers half the width, and then centers the content both horizontally and vertically. To vertically center, I have to make the section content containers absolute position. This seems to throw off the entire output of the preview in cornerstone, but the actual browser output is correct. This is really confusing me and I need to fix it ASAP so I can add more content elements via cornerstone. Anybody have any ideas to fix this problem?

.x-site {
  overflow: auto;
  min-height: 100%;
}
.x-container.offset {
  margin: 0;
}
.x-container.max {
  max-width: unset !important;
}
.entry-wrap {
  width: 100%;
  padding: 0;
} 
.entry-content {
  margin-top: 0;
}
.entry-title {
  display: none;
}
.cs-content > .x-section {
  min-height: 100vh !important;
}
.cs-content .x-section .x-container {
  width: 50%;
  position: absolute;
  top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
}
.x-section .x-bg {
  position: absolute;
  top: unset;
  bottom: 0 !important;
}
.x-section .x-bg-layer-lower-image, .x-bg-layer-upper-image {
  background-size: contain !important;
}
.x-section .x-bg-layer-lower-image {
  background-position: bottom !important;
}
.x-section .x-bg-layer-upper-image {
  background-position: top !important;
}

This is the output of the preview in cornerstone

Screenshot

This is the actual browser output.

Screenshot

PS: Please ignore the gaps on either side of the header. I need to fix the cornerstone preview first

[deeprootsmarketing]

Would be interested to know if you ever resolved this, and what you did!

[justinlosh]

In the .cs-content .x-section .x-container selector I removed the absolute positioning, top, left, and transform properties and added the following

    display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;