Is their a way to make my image equal the size of the navigation bar?

Is there a way that I can make the width of my navigation bar the same width as the image. The problem is I'm working with an image that has an original size of 497 x 298px but to make the image stretch the full width of the page whilst still having margins of 10px on either side I had to set width: 98.4%. Also, for some reason when I set the ul to width 100% the navigation way too long and only fits within a normal desktop screen if I make it 50%. So at the moment they are both the same length, but when I resize the page they start to go out of sync with only the ul element following the rules I've set.

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;
}