父級元素添加 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 屬性的值。