CSS/HTML

I am working on a simple website for my class and I am having trouble with the media queries. I am trying to make my horizontal navigation bar turn into a vertical navigation bar on a small screen. My code works perfectly in firefox, but is not working for other browsers. For google chrome, the media query for my navbar works perfectly on the homepage but not my other pages. I am confused why this is happening and how to fix this. I would appreciate any help I can get. My code is posted below.

html

Chade's Bicycle Company Company Calendar Contact Us

css

.navbar{ width: 100%; background-color: black; overflow: auto; }

.navbar a { float: left; padding: 5px; color: white; text-align: center; text-decoration: none; font-size: 20px; width: 32%; }

.navbar a:hover { color: #FFA500 }

@media screen and (max-width: 480px){ .navbar a { float: none; display: block; width: 100%; } }