Warum verursachen Grenzen, die div Container überlaufen lassen?

Question

Ich habe einen Abschnitt auf eine feste Breite und eine 100% Breite div innerhalb von ihm mit einem 5-Pixel-Grenze festgelegt.

Sieht gut aus, aber Sie können feststellen, dass das enthaltende div etwas dezentriert ist, und es wäre nicht ohne den Rahmen, den ich mit der Client-comp übereinstimmen muss.

Der Code ist ziemlich einfach:

#info { 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
} 
 
.info-box { 
 
    border: 5px solid #0033A0; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 48px 0; 
 
    width: 100%; 
 
}

<section id="info"> 
 
    <div class="info-box">SOME CONTENT</div> 
 
</section>

Das einzige, was ich denken kann, ist die Breite der .info-box zu 98% oder so etwas zu machen, aber das ist immer noch nicht wirklich arbeiten. Also wird irgendetwas?

BTW, habe ich bereits versucht, relative Positionierung, setzen Sie die Anzeige auf inline anstelle von inline-block .... keiner von denen funktioniert.

Answer 1

hinzufügen box-sizing: border-box; auf Ihre info-box Klasse

.info-box { 
    background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0; 
    border: 5px solid #0033a0; 
    box-sizing: border-box; 
    display: inline-block; 
    padding: 48px 0; 
    text-align: center; 
    width: 100%; 
} 

box-sizing hier besser ist