Any help or hint would be greatly appreciated it.

CodePudding user response：

It's center-aligned because of container class

auto: The browser selects a suitable margin to use. For example, in certain cases, this value can be used to center an element.

check this: https://developer.mozilla.org/en-US/docs/Web/CSS/margin#values

.container {
  width: 800px;
  /* margin: 0 auto; */  // remove margin auto
}

CodePudding user response：

In container ruleset you have added margin: 0 auto; which means margin-top:0, margin-bottom:0, margin-left:auto, margin-right:auto.

due to this margin, the ui came to the center.

Try removing margin: 0 auto; in container ruleset.