Need help centering my calculator on the screen

Hi guys! I have been trying the calculator challenge but after using display: inline-block to reduce the size of the calculator division, it is stuck to the left . Increasing the left-margin works but only on desktop view (It screws the mobile view ) . Can anyone help me with this??

Link - https://codepen.io/kshitij1234/pen/mmNmxL

Thank you in advance!!

You can try this:

  • Give html, body, and the outermost .container a 100% height.
  • Make .container a flex container, then justify-content and align-items to center.
1 Like

Since you aren’t using bootstrap go with :
.calculator{position:absolute;
left:50%;
transform:translate(-50%,0);
margin-top: 10%;
margin-left: auto;
margin-right: auto;

1 Like

I advise you to get a tool like Bootstrap that you can learn quickly on FreeCodeCamp. It’s here : Responsive design with Bootstrap

Thanks!!! Worked like a charm

Actually I am using bootstrap

Thanks!! This works too