Css 为什么当我从链接中删除display:inline块属性时会出现滚动条？有没有其他方法可以避免滚动条出现？

当我从链接中删除display:inline块属性时，为什么会出现滚动条？是否有其他方法避免滚动条出现 Php文件-

<main>
    <div class="container">
        <h2>Test Your PHP Knowledge</h2>
        <p>This is a multiple choice quiz to test your knowledge of PHP</p>
        <ul>
            <li><strong>Number of Questions : </strong>5</li>
            <li><strong>Type : </strong>Multiple Choice</li>
            <li><strong>Estimated Time : </strong>4 Minutes</li>
        </ul>
        <a href="question.php?n=1" class="start">Start Quiz</a>
    </div>
</main>



body{
    font-family: arial;
    font-size: 15px;
    line-height: 1.6em;
}

.container{
    width: 60%;
    margin: 0 auto;
    overflow: auto;
}

header{
    border-bottom: 3px #f4f4f4 solid;

}

footer{
    border-top: 3px #f4f4f4 solid;
    text-align: center;
    padding-top: 5px;
}

main{
    padding-bottom: 20px;
    height: auto;
    overflow-y: auto;
}

---

您可以看到为容器指定背景色时发生的情况。 此处发生的情况是，

的填充无助于增加容器的高度

.container{
背景：谭；
填充物：1px.5em；
}
.货柜a{
填充：1em；
背景：#eee；
边框：1px实心；
}

这里有一些文字

这里有一些内联文本

尝试删除溢出-y:auto或（？）

溢出：自动
a.start{
    display: inline-block;
    color: #666;
    background: #f4f4f4;
    border: 1px dotted #ccc;
    padding: 6px 13px;
}