Wyśrodkowanie formularza - nie jest dokładnie na środku, jak to naprawić?

Cześć. Chciałbym się dowiedzieć kilka kluczowych rzeczy związanych z formatowaniem na stronie tekstu, obiektu, obrazu. Zacznę od tego, że ma na stronie formularz. Chciałbym, żeby znajdował się na środku strony od lewej do prawej i od góry do dołu. Udało mi się osiągnąć efekt podobny do tego, który chcę uzyskać.

<div class="row">
    <div class="col-sm-6 offset-sm-3 text-center">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Nazwa użytkownika" required="required">
        </div>
        <div class="form-group">
            <input type="email" class="form-control" placeholder="E-mail" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="Hasło" required="required">
        </div>
        <div class="form-group">
            <label class="checkbox-inline">
                <p1><input type="checkbox" required="required"> Wyrażam zgodę na <a href="#">Warunki korzystania</a> & <a href="#">Politykę prywatności</a>.</p1>
            </label>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary btn-block btn-lg" value="Zarejestruj">
        </div>
    </div>
</div>

Jest jednak dalej za bardzo szeroki, potrzebuję całość o połowę skrócić, ale tak, żeby nadal był na środku strony, a potem muszę go przenieść trochę w dół. Jak powinienem to zrobić? O ile przeniesienie w dół mogę zrobić za pomocą padding-top, tak nie mam pojęcia jak go skrócić. Teoretycznie działa jak ustawiam width: 475px; i jest takiej długości formularz jak chcę, ale nie jest już na środku. Dodam jeszcze, że przy ustawionej width 475px; zmieniłem na taką wartość:

<div class="col-sm-6 offset-sm-5 text-center">

I jest prawie na środku, ale przykładając linijkę, wystaje trochę na prawo. To jak to teraz naprawić? Bo pomysły się skończyły.

Bo centrujesz całą kolumnę, a nie tekst, daj form-group bądź input w oddzielnego diva z text-center.
Ew. opcja dwa: https://www.bootply.com/zcn84QPlzO

Taka uwaga dla @Mateusz23 - zawsze lepiej jest, jak taki kod/przykład, zamiast wklejać w treści posta, podasz w postaci linku do http://jsfiddle.net. W ten sposób, po pierwsze, każda zainteresowana osoba od razu widzi, jak problem wygląda, a po drugie - o wiele łatwiej może nanieść poprawki.

Wiecie co Panowie, udało mi się jakoś rozwiązać ten problem w inny sposób. Trochę jeszcze nie wiem jak udało mi się to zrobić, ale osiągnąłem zamierzony efekt. Na razie muszę podpiąć inne rzeczy, a ewentualnie potem postaram się, żeby pod względem kodu też do dobrze wyglądało. W sumie to mam jeszcze jedno pytanie. Jeśli coś formatuję, to o czym powinienem zawsze pamiętać? Bo widzę, że ludzie dodają margin, padding, i masę innych rzeczy, a ja tego np. nie robię i wygląda to u mnie tak samo, ewentualnie o czym powinienem po prostu pamiętać wstawiając jakieś zdjęcie, formularz, tekst, kartę itp, takie wiecie, "tagi", które muszę na wszelki wypadek dodać do tego w CSS do konkretnego obiektu. Mogę gdzieś o tym poczytać?

Mateusz23 napisał(a):

Bo widzę, że ludzie dodają margin, padding, i masę innych rzeczy

Bootstrap ma fajne klasy do tego: https://getbootstrap.com/docs/4.0/utilities/spacing/
często sobie importuję nawet jak go nie używam, bardzo poręczne.