Tak rzeźbisz, że sam nie wiesz co się dzieje. Po kolei:
zły doctype:
<DOCTYPE HTML5>
powinno być
<!DOCTYPE html>
<span style="background-color:#0000ff"> <link rel="stylesheet" type="text/css" href="C:\xampp\htdocs\my_page</span><span style="color:#800000"><span style="background-color:#0000ff">\beta\sheetCSS.css"></span></span><span style="background-color:#0000ff"></link></span>
Co to jest? Jestem ciekaw co autor tego kodu miał na myśli
Oczywiście zewnętrzne arkusze stylów podpina się w ten sposób:
<link rel="stylesheet" href="sciezka/do/pliku.css">
Po tym fragmencie:
<link rel="stylesheet" href="<a href="https://fonts.googleapis.com/icon?family=Material+Icons" >"="" rel="nofollow" target="_blank" original-title="" title="">https://fonts.googleapis.com/icon?family=Material+Icons"></a>
wnioskuję, że próbowałeś załączyć zewnętrzne fonty z Google'a. Najgorsze jest to, że zaciągając cokolwiek z zewnętrznych CDN, chyba każdy z serwerów podaje gotowy kod do podpięcia, nawet kopiuje się samodzielnie do schowka.
<meta name="viewport" content="width=device-width, initial-scale=1">
viewporta możesz wywalić. Nie wiesz jak podpiąć CSS, to tym bardziej nie zrobisz strony responsywnej. Ten tag jest zbędny.
<nav>
<div id="nav">
<div class="navbar">one</div>
<div class="navbar">two</div>
<div class="navbar">three</div>
<div class="navbar">four</div>
</div>
</nav>
div z id nav jest zbędny. W ostateczności możesz nadać id na <nav> i efekt będzie ten sam. Natomiast nawigację, od strony semantycznej lepiej jest zrobić za pomocą listy, więc powyższy kod można by przepisać na to:
<nav>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</nav>
Kod jest czystszy, a do tego czytniki będzie go lepiej interpretować.
Tutaj masz gotowy kod, który wyświetli Ci nawigację w sposób liniowy:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>refactor</title>
<style>
nav ul li {
display:inline;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"></a>one</li>
<li><a href="#"></a>two</li>
<li><a href="#"></a>three</li>
<li><a href="#"></a>four</li>
</ul>
</nav>
</body>
</html>
Wszystko dało się zrobić za pomocą JEDNEJ właściwości CSS.
Popracuj nad semantyką, bo ogólnie jest tragedia.