边距和边框问题

Question

我正在尝试创建两个80％宽的盒子，包括8px边框。 （除非我可以创建％边框，我认为你不能这样做）现在，当我在我的框的右侧和左侧设置10％的边距时，它们向右偏移了几个像素。有办法解决这个问题吗？

HTML：

<div id="upcoming_show" class="front_page_item grid_8">
        <div class="left front_block_headline">
            <h2 class="upper_headline">Upcoming Show:</h2>
            <h1>The Walrus</h1>
        </div>
        <p>The Walrus is a show that truly shows the human spirit. The main character, Mickey, is found lying face down on a beach in the middle of...</p>
        <p><a href="#" class="btn right">Read More</a></p>
    </div>

    <div id="recent_post" class="front_page_item grid_8">
        <div class="left front_block_headline">
            <h2 class="upper_headline">Recent Post:</h2>
            <h1>GSA was a BLAST!</h1>
        </div>

CSS：

#upcoming_show {
    margin-right: 10%;
    margin-left: 10%;
    min-height: 200px;
}

#recent_post {
    margin-right: 10%;
    margin-left: 10%;
    min-height: 200px;
}

.front_page_item {
    text-align: center;
    border: 8px solid #C8C8C8;
}

Answer 1

即将到来的节目有2个正确的魔法集。