html - 按钮切成两半

Question

所以我正在为一个类(class)元素做这个网站，出于某种原因，如果我在屏幕上使浏览器窗口尽可能小，我页面的“关于”部分中的第二个按钮会被切成两半，无论是否设置了溢出。

我附上了按钮的图像和我的 css 和 html 的片段，看看是否有人可以弄清楚为什么这个按钮被砍掉了。 My Website (Why Should You Go Section)

.about {
    position: relative;
    text-align: center;
    padding-bottom: 9em;
    overflow: hidden;
    
}

.about h2 {
    margin-top: 2em;
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 4.5em;
    color: #ff5339; 
/*    text-align: center;*/
}

.about hr {
    width: 90%;
    border: 0;
    height: 1px;
    background: #61792f;
}

.about p {
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    width: 80%;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-size: 1.5em;
    color: #61792f;
    line-height: 150%;
    text-align: left
}

.about a {
    text-decoration: none;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: #ff5339;
    border: 3px solid #ff5339;
    padding: .3em .7em;
    margin: 1em;
}

.about a:hover {
    border: 3px solid #ff5339;
    background-color: #ff5339;
    color: #e9dec5;
}

<div class="about">
        <h2>WHY SHOULD YOU GO?</h2>
        <hr>
        <p>Germany is a fascinating fusion of old and new. The bohemian streets of Berlin act as a fertile breeding ground for hip art, unique design and innovative ideas, while heritage-filled Munich boasts historic architecture in the form of impressive Baroque and Rococo buildings. In between, travellers will find stretches of idyllic countryside, impossibly gorgeous castles, charming university towns and boisterous Bavarian beer halls. Be introduced to the progressive cities and romantic splendour of Germany and never look back.</p>
        <a href="about.html" class="learn">LEARN MORE</a>
        <a href="tours.html" class="book">BOOK NOW</a>
    </div>

Answer 1

这是因为空格环绕。在您的 .about a 样式中包含 white-space: nowrap;。