我使用 bootstrap 和 CSS 创建了一个带有标题（Coffee Africana）的横幅以及我试图放置在标题下方的三个按钮（“Coffees”、“About Us”和“Contact”）。我也试图让他们响应调整标题的方式。
目前，标题和按钮相互重叠，我试图将它们分开的任何方法都不起作用。我尝试为所有三个按钮创建一个 div 并操纵其网格间隙值。我还尝试给每个按钮和 ID 并操纵每个按钮的 grip-gap 值。这些都不起作用。
我的代码如下：
<head>
<meta charset="utf-8">
<meta name="" description content="This is a dummy website designed to showcase Thabo Mtetwa's HTML and CSS skills with minor Javascript applications">
<meta name"viewport" content=""width=device-wdith, initial-scale="1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap" rel="stylesheet"></head>
<header>
<title>Coffee Africana</title>
</header>
<body>
<div>
<div class="masthead" style="background-image: url('http://127.0.0.1:3000/Users/thabomtetwa/Desktop/coffee-africana/pics/africancoffee_banner.jpg');">
<div class="color-overlay d-flex flex-row justify-content-center align-items-center" id="banner-heading">
<h1 style="font-size: 10vw">Coffee Africana</h1>
</div>
<div class="d-flex flex-row justify-content-center align-items-center" id="banner-buttons">
<div>
<a button type="button" class="btn btn-warning" id="coffee-button" href="http://127.0.0.1:3000/Users/thabomtetwa/Desktop/coffee-africana/main/coffees.html">Coffees</a>
</div>
<div>
<a button type="button" class="btn btn-warning" id="about-button" href="http://127.0.0.1:3000/Users/thabomtetwa/Desktop/coffee-africana/main/coffees.html">About Us</a>
</div>
<div>
<a button type="button" class="btn btn-warning" id="contact-button" href="http://127.0.0.1:3000/Users/thabomtetwa/Desktop/coffee-africana/main/coffees.html">Contact</a>
</div>
</div>
</div>
<p>Africa is known for its rich history, biodiversity, and culture. But for coffee lovers the continent is also known for producing some of the best coffee beans in the world.
With its world-renowned quality and unique flavors, African coffee should definitely be on the list to try for any coffee drinker. The question is which one should you pick?
Keep reading to find our growing list of profiles on the best East African Coffees and find out why they deserve their revered reputation.
</p>
<h2>Why Is African Coffee Good?</h2>
<p>Much of Africa lies across the “bean belt” which has the perfect growing conditions for coffee. Coffee production is situated along the African Great Lakes, where fertile soil, cool climate, and numerous highlands makes it ideal for cultivating the Arabica coffee species.
This region is known for producing one of the fruitiest coffees in the world. African coffees are typically characterized by bright acidity with wine-like, floral, and fruity flavors. This can range from citrus, berries, bergamot, and even hints of jasmine.
</p>
<p>Coffee experts have long since recognized Ethiopia and Kenya for their premium-quality, specialty grade coffee varieties such as Typica, SL-28, Kenya AA coffee, and the famed Gesha varietal.</p>
<p>Countries such as Congo, Rwanda, Tanzania, and Burundi also produce uniquely flavored coffees and are steadily placing high for specialty coffee lovers. Other regions, including Côte d’Ivoire and Uganda produce mainly Robusta varieties.</p>
</div>
</body>