This is what happens when people learn HTML/CSS without learning the box model
You made the width 100%. Then you added a padding of 2em on top of it. That's why the width is 4em (2em on each side) wider than it should be.
There are a few ways to fix this, but this would probably be the simplest solution:
Take out the width or change it to auto.
To understand why, learn about the box model
. Whoever taught you HTML/CSS probably left that out (because so many people do) when it is one of the most fundamental concepts.
Long time ago, IE used to use the much more intuitive method of having the width and height include the padding and border. But, this wasn't the standard method. This is called "border-box" box model.
The standard method is called the "content-box" box model. The width only measures the content itself, without the padding and border.