MM shifts to the right about 1cm after it loaded

[Johanba]

Hi Fellow MM enthusiast

Since a few days about my MM shifts about 1cm to the right after loading the initial page, and for the life of me I cannot find the issue

Any help will be appreciated

Below I included my custom.css and main.css
Not sure where else it could be

custome.css
"/* Custom CSS Sample
*

• Change color and fonts here.
• Beware that properties cannot be unitless, so for example write ‘–gap-body: 0px;’ instead of just ‘–gap-body: 0;’
  */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: /
/ @import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap’); */

:root {
–color-text: #999;
–color-text-dimmed: #666;
–color-text-bright: #fff;
–color-background: black;

–font-primary: “Roboto Condensed”;
–font-secondary: “Roboto”;

–font-size: 20px;
–font-size-small: 0.75rem;

–gap-body-top: 60px;
–gap-body-right: 60px;
–gap-body-bottom: 60px;
–gap-body-left: 60px;

–gap-modules: 30px;
}

body {
margin: 0;
position: absolute;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
height: 100vw;
object-fit: cover;
top: 100vh;
visibility: visible;

}"
main.css
"
:root {
–color-text: #999;
–color-text-dimmed: #666;
–color-text-bright: #fff;
–color-background: #000;
–font-primary: “Roboto Condensed”;
–font-secondary: “Roboto”;
–font-size: 20px;
–font-size-xsmall: 0.75rem;
–font-size-small: 1rem;
–font-size-medium: 1.5rem;
–font-size-large: 3.25rem;
–font-size-xlarge: 3.75rem;
–gap-body-top: 60px;
–gap-body-right: 60px;
–gap-body-bottom: 60px;
–gap-body-left: 60px;
–gap-modules: 30px;
}

html {
cursor: none;
overflow: hidden;
background: var(–color-background);
user-select: none;
font-size: var(–font-size);
}

::-webkit-scrollbar {
display: none;
}

body {
margin: var(–gap-body-top) var(–gap-body-right) var(–gap-body-bottom) var(–gap-body-left);
position: absolute;
height: calc(100% - var(–gap-body-top) - var(–gap-body-bottom));
width: calc(100% - var(–gap-body-right) - var(–gap-body-left));
background: var(–color-background);
color: var(–color-text);
font-family: var(–font-primary), sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

/**

• Default styles.
  */

.dimmed {
color: var(–color-text-dimmed);
}

.normal {
color: var(–color-text);
}

.bright {
color: var(–color-text-bright);
}

.xsmall {
font-size: var(–font-size-xsmall);
line-height: 1.275;
}

.small {
font-size: var(–font-size-small);
line-height: 1.25;
}

.medium {
font-size: var(–font-size-medium);
line-height: 1.225;
}

.large {
font-size: var(–font-size-large);
line-height: 1;
}

.xlarge {
font-size: var(–font-size-xlarge);
line-height: 1;
letter-spacing: -3px;
}

.thin {
font-family: var(–font-secondary), sans-serif;
font-weight: 100;
}

.light {
font-family: var(–font-primary), sans-serif;
font-weight: 300;
}

.regular {
font-family: var(–font-primary), sans-serif;
font-weight: 400;
}

.bold {
font-family: var(–font-primary), sans-serif;
font-weight: 700;
}

.align-right {
text-align: right;
}

.align-left {
text-align: left;
}

header {
text-transform: uppercase;
font-size: var(–font-size-xsmall);
font-family: var(–font-primary), Arial, Helvetica, sans-serif;
font-weight: 400;
border-bottom: 1px solid var(–color-text-dimmed);
line-height: 15px;
padding-bottom: 5px;
margin-bottom: 10px;
color: var(–color-text);
}

sup {
font-size: 50%;
line-height: 50%;
}

/**

• Module styles.
  */

.module {
margin-bottom: var(–gap-modules);
}

.module.hidden {
pointer-events: none;
}

.module:not(.hidden) {
pointer-events: auto;
}

.region.bottom .module {
margin-top: var(–gap-modules);
margin-bottom: 0;
}

.no-wrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.pre-line {
white-space: pre-line;
}

/**

• Region Definitions.
  */

.region {
position: absolute;
}

.region.fullscreen {
position: absolute;
inset: calc(-1 * var(–gap-body-top)) calc(-1 * var(–gap-body-right)) calc(-1 * var(–gap-body-bottom)) calc(-1 * var(–gap-body-left));
pointer-events: none;
}

.region.right {
right: 0;
text-align: right;
}

.region.top {
top: 0;
}

.region.top.center,
.region.bottom.center {
left: 50%;
transform: translateX(-50%);
}

.region.top.right,
.region.top.left,
.region.top.center {
top: 100%;
}

.region.bottom {
bottom: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
bottom: 100%;
}

.region.bar {
width: 100%;
text-align: center;
}

.region.third,
.region.middle.center {
width: 100%;
text-align: center;
transform: translateY(-50%);
}

.region.upper.third {
top: 33%;
}

.region.middle.center {
top: 50%;
}

.region.lower.third {
top: 66%;
}

.region.left {
text-align: left;
}

.region table {
width: 100%;
border-spacing: 0;
border-collapse: separate;
}
"

[sdetweil]

@Johanba said in MM shifts to the right about 1cm after it loaded:

custome.css

that is a typo, yes??

custom.css

also, see the developers window elements tab
see the second link in my signature below

this may help you identify where the left margin padding is coming from