CSS Flex Align-Items Center won't center all the elements in the container, in small screens

In my JavaScript project, https://omarjuvera.github.io/portfolios/javascript/logo-maker/ To center the header elements, I used display: flex; align-items: center;, but for some reason, the H1 element won't center in smaller screens, and stays aligned to the left. However, the H2 does get centered.

Despite having align-items: center;, Flex is not working as is should 👇 ...in small screens
Otherwise, works fine in larger screens.

The CSS rules, in document.css are as folows:

header {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
    align-items: center;
    }

It is oddly strange that H1 is not behaving as it should (in narrow screens)

• The editor who associated this question to "how-can-i-center-text", failed to read thoroughly as well as failing to understand there are clear differences. My question is unique and different! Didn't even noticed my mention to flex! #ReadTitles! Remove his/her editorial rights!
  This question is not a duplicate and should be re-opened

Because align-items: center aligns elements. The element is 100% wide at smaller widths and the text breaks. The text is aligned left inside the element (which does not matter at wider sizes) but it does matter at smaller ones.

At lower widths, the text breaks poorly because it's too long for a single line. The text is not aligned center however.

Just add text-align:center.