[CSS] Child element width 100% แต่กว้างไม่เท่า parent element ครับ

กระทู้คำถาม
โค้ดครับ: http://jsbin.com/vitaluqore/edit?html,css,output

ผมต้องการซ่อน scrollbar เลยใส่ padding-right: 17px; ให้ div#outer แล้วตั้ง box-sizing: content-box; เพื่อดัน scrollbar ออกไปจากจอ
เซต width: 100%; ให้ div#inner กว้างเท่า div#outer

แต่ทำยังไงก็กว้างไม่เท่า จะเหลือที่ขวามือขนาดเท่ากับขนาดของ padding-right ที่เซตให้ div#outer
ทั้ง ๆ ที่เซต box-sizing: content-box; ไปแล้ว และ padding-right ก็หลุดขอบ <body> ไปแล้วเช่นกัน

เหมือนว่า box-sizing เป็นทั้ง content-box และ border-box ในเวลาเดียวกันน่ะครับ เพราะ padding-right อยู่นอก content 17px ขณะเดียวกันก็กินเนื้อที่ content มาข้างในอีก 17px

แล้วมันมีปัญหาเวลาจะเซตให้ <span> อยู่กึ่งกลาง แต่มันจะไม่กึ่งกลางน่ะครับ

งงมากครับ ติดมาหลายวันแล้ว ที่อยากรู้คือเรื่อง padding ที่มีปัญหาเนี่ยครับ รบกวนพี่ ๆ ช่วยอธิบายหน่อยครับว่าเป็นเพราะอะไร
ขอบคุณครับ
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่