Below is the CSS and HTML code, detailing a specific issue.
* {
box-sizing: border-box;
font-family: Georgia, 'Times New Roman', Times, serif;
}
body {
margin: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.topnav {
overflow: hidden;
background-color: #F5CB5C;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
.topnav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
.topnav a {
color: #242423;
text-align: center;
text-decoration: none;
}
.topnav li:hover {
background-color: #E8EDDF;
color: black;
}
.topnav li:active {
background-color: #E8EDDF;
color: black;
}
/* ISSUE: BUTTONS OVERLAP FIXED NAVIGATION BAR */
.content {
background-color: #242423;
padding: 10px;
color: #E8EDDF;
}
.footer {
background-color: #F5CB5C;
padding: 10px;
color: #242423;
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 20em;
border-radius: 10px;
border-color: #FFFFFF;
max-width: 100%;
height: auto;
object-fit: cover;
margin: 1em;
}
.card-button {
background-color: #ddd;
position: relative;
border: none;
color: black;
padding: .5em 1em;
text-align: center;
text-decoration: none;
float: right;
left: .5em;
bottom: .5em;
cursor: pointer;
border-radius: 16px;
font-size: 16px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.card img {
border-radius: 10px 10px 0 0;
}
.text-center {
text-align: center;
}
.center {
right: 50%;
}
.title {
margin-top: 2em;
text-align: center;
}
.grid-gallery {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.spacer {
width: 100%;
height: 2em;
}
Here is the corresponding HTML code:
<div class="card">
<img src="https://d3vjn2zm46gms2.cloudfront.net/blogs/2016/05/27005442/Roman-cup_w1280px_h720px.png" alt="Silver Cup" style="width:100%">
<div class="container">
<h4><b>Roman Silver Cup</b></h4>
<button class="card-button">Buy Now</button>
<p>$89.99</p>
</div>
</div>
The problem being encountered is that the buttons are overlapping with the fixed navigation bar. Any insights into why this is happening would be greatly appreciated.