And thanks for the links… The last one was great… :-)

And sorry for “easy” ;-)

I’m more the opposite of you… :D

you can see their definitions in css/main.css (small sample)

.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;
}

you can change them, by defining the same thing (the selector clause, everything before the {) in custom.css

in MM there is a stack of css definitions

custom.css on top
module css  (multiple)
main.css

the versions of definitions above another overrides the prior

custom.css overrides all
module overrides main
main is the base..

in the developers window you can see where a definition comes from when u select and element, in the element tab
see this for a starter on developers window elements tab
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1707761145294

the doc, https://docs.magicmirror.builders/modules/configuration.html#position
shows the view of the default definitions…

note that adding to one means taking away from another…

there are lots of settings that affect each other… padding, margin, width , height,
what to do about content that exceeds the boundary, wrap, clip,
alignment

easy is a term I would not use for html/css
(I am not a visual designer, and this hurts my head…)
https://www.geeksforgeeks.org/design-a-web-page-using-html-and-css/
https://www.udacity.com/blog/2021/02/an-introduction-to-margins-and-padding-in-css.html