Need to center page

[trecwp]

Hello-
I am using one of the Theme Co templates, and I think I must of screwed something up in the Global CSS. the top section is all pushed to the right, same thing when I added a new section with two columns, the one column sections seeemed to work. Below is the code i have in global CSS with a picture attached of the site pushed to the right

Thanks!

/*
// Global Styling
// --------------
*/

.site {
padding-top: -40em;
}

.blog .entry-wrap {
padding: 0px !important;
box-shadow: none !important;
}

.blog .entry-header {
display: flex;
flex-direction: column-reverse;
}

.blog .p-meta span,
.blog .p-meta span i,
.blog .p-meta span:after {
display: none;
}

.blog .p-meta span:nth-child(2) {
display:inline-block;
margin: 15px 0;
font-size: 1.3em !important;
line-height: 1.4;
color: #b3b3b3;
}

.blog .entry-title a {
font-size: 0.9em !important;
line-height: 1.5;
color: #191919;
}

.blog .h-landmark {
padding: 0vw 0em 2vw 0em;
font-size: calc(2em + 1.8vw);
letter-spacing: 0em;
text-align: left;
}

.blog .h-landmark span:before,
.blog .h-landmark span:after {
display:none;
}

.blog .p-landmark-sub {
max-width: 640px;
margin: 0em;
padding: 0em 0em 0em 0em;
font-family: inherit;
font-size: 1em;
font-weight: 400;
letter-spacing: 0em;
line-height: 2.4;
text-align: left;
}

.post .entry-featured {
display: none;
}

.post .entry-wrap {
border-radius: 4px;
}

.x-navbar,
.x-topbar {
border-bottom: 0px;
box-shadow: none;
}

.x-navbar .x-container,
.x-topbar .x-container {
position: relative;
width: 100%;
max-width: 1075px;
margin-left: 0;
padding: 0 0em;
}

.masthead-inline .desktop .x-nav {
float: left;
}

.x-btn-navbar.collapsed {
color: #b9965c;
}
.x-navbar .mobile .x-nav {
padding: 0 1em;
}

.x-brand {
display: none;
}

.x-navbar .mobile .x-nav li > a:hover,
.x-navbar .mobile .x-nav .x-active > a,
.x-navbar .mobile .x-nav .current-menu-item > a {
color: #b9965c;
}

.x-topbar .x-container .p-info {
clear: both;
width: 100%;
font-size: 14px;
line-height: 1.6;
background-color: transparent;
}

.x-topbar .x-container .p-info span {
padding-bottom: 1em;
display: block;
}

.x-colophon.top {
padding-top: 0px;
padding-bottom: 0px;
border: 0px;
box-shadow: none;
}

.x-colophon.top .widget {
text-shadow: none;
}

.x-colophon.top .x-container {
width: 100%;
max-width: 100%;
}

/*
// (min-width: 768px)
// ------------------
*/

/*
// (max-width: 979px)
// ------------------
*/

@media (max-width: 979px) {
.x-brand {
display: block;
}

.x-navbar {
border-top: 0px solid #b9965c;

}
}

/*
// (min-width: 980px) and (max-width: 1169px)
// ------------------------------------------
*/

@media (min-width: 980px) and (max-width: 1169px) {
.site {
padding-left: 3em;
padding-right: 3em;
}

.x-force-full-width,
.x-colophon {
position: relative !important;
left: calc(0vw - 3em);
width: calc(100vw + 3em);
padding-left: 3em !important;
padding-right: 3em !important;
}

.site:before,
.site:after {
display: none;
}
}

/*
// (min-width: 1048px)
// -------------------
*/

@media (min-width: 1048px) {
.x-topbar .x-container .p-info {
position: absolute;
top: 0px;
right: 0;
width: 450px;
}
}

/*
// (min-width: 1170px)
// -------------------
// 01. Should match with max width from Theme Options >
// Layout and Design + 115px. Current max-width: 1055px +
// 115px (a space for header and footer to bleed out) = 1170px.
// 02. 107px value comes from final output width of logo on site
// (e.g. original is 214px but halved for retina support).
*/

@media (min-width: 1170px) { /* 01 */
.site {
padding-left: calc((50vw - (1170px / 2)) + 1em);
padding-right: 3em;
}

.x-force-full-width,
.x-colophon {
position: relative !important;
left: calc(0vw - ((50vw - (1170px / 2) + 1em)));
width: calc(100vw + 3em);
padding-left: calc((50vw - (1170px / 2)) + 1em) !important;
}

.x-force-full-width.x-padded,
.x-colophon {
padding-left: calc((47.5vw - (1170px / 2)) + 1em) !important;
}

.x-force-full-width.x-rtl {
padding-left: 0 !important;
padding-right: calc((47.5vw - (1170px / 2)) + 1em) !important;
}

.no-right-padding {
right: calc(0vw - 3em);
}

.site:before,
.site:after {
left: calc(((49vw - (1170px / 2)) - (107px + 2vw)) + 1em); /* 02 */
}

.site > .x-container.max {
margin-left: 0px;
}

.blog .site > .x-container.max,
.blog .site > .x-header-landmark {
margin-left: 0px;
padding-left: 1em;
padding-right: 1em;
}
}

/*
// (max-width: 1440px)
// -------------------
// Hide spacer background arrow. Could be done for each section’s CSS
// but it is present on all pages so custom CSS is more useful and reusable.
*/

@media ( max-width: 1440px) {
.head_spacer .x-bg {
display: none;
}
}

/*
// (min-width: 1340px)
// -------------------
// 01. Background logo positioning for very large screens.
// 02. Dimensions should match logo used in Theme Options. Original logo
// is 214x48 but halved for retina display support.
// 03. Logo is rotated and then translate value should be adjusted to suit.
*/

.site:before {
top:00;
left:0;
transform: translate(0%, 0); /* 03 */
}

.site:after {
bottom: 6em;
transform: rotate(-90deg) translate(36%, 0); /* 03 */
}
.x-navbar .desktop .x-nav>li>a>span {
font-family: “Raleway”,sans-serif;
}

[ruenel]

Hey Trec,

Thanks for writing in! You are using the Lawyer site demo and this is a custom built demo site that is not a centered design. You will have to remove some of the custom CSS codes that has padding-left and padding-right in it. And you may also have other issues like that logo is not displaying anymore.

Please go to Cornerstone > Theme Options > CSS and remove this CSS block:

/*
// (min-width: 980px) and (max-width: 1169px)
// ------------------------------------------
*/

@media (min-width: 980px) and (max-width: 1169px) {
  .site {
    padding-left: 3em;
    padding-right: 3em;
  }

  .x-force-full-width,
  .x-colophon {
    position: relative !important;
    left: calc(0vw - 3em);
    width: calc(100vw + 3em);
    padding-left: 3em !important;
    padding-right: 3em !important;
  }

  .no-right-padding {
    right: calc(0vw - 3em);
  }

  .site:before,
  .site:after {
    display: none;
  }
}


/*
// (min-width: 1048px)
// -------------------
*/

@media (min-width: 1048px) {
  .x-topbar .x-container .p-info { 
    position: absolute;
    top: 50px;
    right: 0;
    width: 450px;
  }
}


/*
// (min-width: 1170px)
// -------------------
// 01. Should match with max width from Theme Options >
//     Layout and Design + 115px. Current max-width: 1055px +
//     115px (a space for header and footer to bleed out) = 1170px.
// 02. 107px value comes from final output width of logo on site
//     (e.g. original is 214px but halved for retina support).
*/

@media (min-width: 1170px) { /* 01 */
  .site {
    padding-left: calc((50vw - (1170px / 2)) + 1em);
    padding-right: 3em;
  }

  .x-force-full-width,
  .x-colophon {
    position: relative !important;
    left: calc(0vw - ((50vw - (1170px / 2) + 1em)));
    width: calc(100vw + 3em);
    padding-left: calc((50vw - (1170px / 2)) + 1em) !important;
  }

  .x-force-full-width.x-padded,
  .x-colophon {
    padding-left: calc((47.5vw - (1170px / 2)) + 1em) !important;
  }
  
  .x-force-full-width.x-rtl {
    padding-left: 0 !important;
    padding-right: calc((47.5vw - (1170px / 2)) + 1em) !important;
  }

  .no-right-padding {
    right: calc(0vw - 3em);
  }

  .site:before,
  .site:after {
    left: calc(((49vw - (1170px / 2)) - (107px + 2vw)) + 1em); /* 02 */
  }

  .site > .x-container.max {
    margin-left: 0px;
  }

  .blog .site > .x-container.max,
  .blog .site > .x-header-landmark {
    margin-left: 0px;
    padding-left: 1em;
  	padding-right: 1em;
  }
}


/*
// (max-width: 1440px)
// -------------------
// Hide spacer background arrow. Could be done for each section's CSS
// but it is present on all pages so custom CSS is more useful and reusable.
*/

@media ( max-width: 1440px) {
  .head_spacer .x-bg {
    display: none;
  } 
}


/*
// (min-width: 1340px)
// -------------------
// 01. Background logo positioning for very large screens.
// 02. Dimensions should match logo used in Theme Options. Original logo
//     is 214x48 but halved for retina display support.
// 03. Logo is rotated and then translate value should be adjusted to suit.
*/

@media (min-width: 1441px) { /* 01 */
  .site:before,
  .site:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(http://xsupport.local/wp-content/uploads/2022/10/logo-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 107px; /* 02 */
    height: 24px; /* 02 */
  }
  
  .site:before {
    top: 0;
    transform: rotate(-90deg) translate(-87%, 0); /* 03 */
  }

  .site:after {
    bottom: 6em;
    transform: rotate(-90deg) translate(36%, 0); /* 03 */
  }
}

Save your changes and test your site again. Thanks.