设置了50% 不能并排显示
子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域；
同时，正是由于子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域，所以造成了子元素溢出了父元素。
具体原因见：正确使用"width:100%" - 简书 https://www.jianshu.com/p/7d565f14f98e
当设置box-sizing:border-box时，子元素设置宽度的百分比是指子元素整个盒子区域相对于父元素内容区域。
如果想要正确使用"width:100%"这一属性，一定要设置"box-sizing:border-box",否则会造成子元素溢出。
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}