JS Calculator Alignment Issues

I’m struggling a bit to align my buttons properly
Any suggestions are appreciated

In your CSS, try changing:

  margin: 10px;
  width: 2.6vw;
  height: 2.6vw;


  margin: 10px;
  width: 2.6em;
  height: 2.6em;

no change from view width to em

Widen and shrink the width of your browser and you will notice a big difference between the two unit types. I know it does not solve the issue with the 1, 2, 3 lining up with the = sign or the bottom 0 and . anchors, but those are separate issues.

Yes I see
But it is the 123, =
and 0, . alignment that I’m having trouble with

I suggest reading about Bootstrap 3’s Grid System to accomplish what you want without having to create a lot of custom CSS.

Thanks I’ll give it a try

To get the 1 2 3 = and 0 . to line up correctly, check out the section on Nesting columns.

I gave it a good read but somehow it’s not clicking in for me
I looked over the code in the sample and it appears that it is somehow doable without getting into column structures?
I’ll put some more hours into it until I figure out a work around…unless someone has more suggestions?