边缘和边界的麻烦

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个正确的麦金斯集。