父级元素添加 box-sizing: border-box; 即可解决
在设置了元素宽度后再加上margin和padding，子元素会超出父元素宽度，肯定有时候是不需要这样的，解决方案：添加 box-sizing属性即可；
box-sizing的属性对应有三个值
box-sizing: content-box|border-box|inherit;
1.content-box
这应该就是属于默认的，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
2.border-box
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3.inherit
从父元素继承 box-sizing 属性的值。