WordPress Containers CSS

containers.css

/*------- Three types of Containers --------*/
.container {
	margin: auto;
	max-width: var(--container);
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
}

.container-fluid {
	margin: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
}

.container-content,
.alignfull:not(.is-style-wide) > .wp-block-group__inner-container {
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;

	& * + * {
		margin-top: var(--sp-base);
	}

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {

		& + * {
			margin-top: 0;
		}
	}

	& > * {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--container-content);
	}

	& > .alignfull {
		margin-left: calc(-1 * var(--container-padding));
		margin-right: calc(-1 * var(--container-padding));
		max-width: none;
		width: auto;
	}

	& > .alignwide {
		max-width: calc(var(--container) - (var(--container-padding) * 2));
		width: 100%;
	}
}

.sidebar-layout .container-content {
	padding-left: 0;
	padding-right: 0;

	@media (--bp-medium) {

		& > .alignfull {
			margin-left: 0;
			margin-right: 0;
		}
	}
}