I'm currently working on a web project and have the following CSS and HTML code:
style.css:
body {
background-color: red;
font-size: 14px;
font-family: Roboto,arial,sans-serif
color: gray;
}
img {
height: 92px;
width: 272px;
}
a {
color: gray;
}
a:visited {
text-decoration: none;
}
.navbutton,
.footbutton {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav-img {
border-radius: 50%;
height: 32px;
width: 32px;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Google</title>
<link rel="stylesheet" type="text/css" href="style.css?version=8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar container">
<a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
<a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
<a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
<a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
<a class="navbutton nav-img" href="https://www.google.com">
<img src="https://i.stack.imgur.com/34AD2.jpg">
</a>
</div>
<div class="bod">
<div class="main-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
</div>
<input type="text">
</div>
<div class="srch-button">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
<footer>
<div class="footbutton">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
Advertising
</a>
<a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
Business
</a>
<a href="https://www.google.com/search/howsearchworks/?fg=1">
How Search Works
</a>
<a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC">
Carbon Neutral Since 2007
</a>
<a href="https://policies.google.com/privacy?hl=en&fg=1">
Privacy
</a>
<a href="https://policies.google.com/terms?hl=en&fg=1">
Terms
</a>
<a href="https://www.google.com/">
Settings
</a>
</footer>
</html>
While making changes to the CSS file, I noticed that only adjustments to the image dimensions are reflected in the browser (such as changing the img height). Other modifications, like altering the background color, don't appear. I've tried appending a query string to the link href and disabling cache in Chrome, but the issue persists. Any suggestions on how to fix this would be greatly appreciated!
An example of the problem is updating the width value in the img selector from 272px to 372px which is consistently shown in the browser. However, changing the background color from white to red as specified in the code isn't displayed properly.