Is there a way for me to match the width of my navigation bar with that of an image? The issue I'm facing is that the original size of the image is 497 x 298px, and in order to stretch it across the full width of the page while maintaining margins of 10px on each side, I had to set the width to '98.4%'.
Furthermore, when I set the ul element's width to '100%', the navigation extends too far and only fits within a standard desktop screen if I reduce it to 50%. Currently, both the image and the ul have the same length, but as I resize the page, they become out of sync, with only the ul adhering to the defined rules.
ul {
display: block;
max-width: 100%;
list-style-type: none;
margin: 10px 10px 0 10px;
padding-left: 32%;
padding-right: 25%;
text-align: center;
overflow: hidden;
background-color: #F25f70;
font-family: "Oswald", sans-serif;
border-bottom: 2px solid rgba(0, 0, 0, 0.15)
}
img {
width: 98.4%;
height: 500px;
margin-left: 10px;
margin-right: 10px;
object-fit: cover;
}