HTML, CSS, BOOTSTRAP

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

There are few things you could do to make your final result much closer to the solution.

1. use the recommended font-weight and font-family as advised in the styleguide.md file in the project documents you downloaded

2. use the background color recommended for the body to make it look much more like the solution. that would be background-color: hsl(212, 45%, 89%); in this case.

3. use border-radius to add some border to the main div and also seperately do it for the img too

4. you could increase the padding in the main div element to give some space between the content of the div and the border