Need help centering my calculator on the screen

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 -

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.


Since you aren’t using bootstrap go with :
margin-top: 10%;
margin-left: auto;
margin-right: auto;


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