Struggling with aligning all the navbar options in a single row. Here is an example:
https://jsfiddle.net/knyx2u8h/ ` Example Domain
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#HomeNav {
background: #132D93; /* Old browsers */
background: -moz-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(32%,#0000CD ), color-stop(50%,#4169E1), color-stop(68%,#0000CD )); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #0000CD 32%,#4169E1 50%,#0000CD 68%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #0000CD 32%,#4169E1 50%,#0000CD 68%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #0000CD 32%,#4169E1 50%,#0000CD 68%); /* IE10+ */
background: linear-gradient(to right, #0000CD 32%,#4169E1 50%,#0000CD 68%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000CD', endColorstr='#0000CD',GradientType=1 ); /* IE6-9 */
border-bottom: 5px solid #B9975B;
margin-top:25px;
}
#HomeNav a {
display: block;
padding: 20px 10px;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
text-decoration:none;
}
#HomeNav a:hover, #global_nav a.active {
background-color: #00008B;
text-decoration: none;
}
#HomeNav ul {
width:1200px;
/*margin:0 auto;*/
margin-left:-40px;
/*position:relative;*/
text-align:left;
}
#HomeNav ul li{
/*display:inline-block; */
display: inline-block;
list-style-type: none;
padding-right: 0px;
}
</style>
</head>
<body>
<nav id="HomeNav">
<ul>
<li><a href="Pages/About/about.html" > About</a></li>
<li><a href="Pages/Who We Are/who we are.html" > Who We are</a></li>
<li><a href="Pages/Latest publications/latest publications.html" >Latest Publications </a></li>
<li><a href="Pages/Online Centre/online centre.html" >Online Centre </a></li>
<li><a href="Pages/Our Partners/our partners.html" >Our Partners </a></li>
<li><a href="Pages/English my way/english my way.html" >English My Way </a></li>
<li><a href="Pages/Apprenticeship/apprenticeship.html" >Apprenticeship </a></li>
<li><a href="Pages/it academy/it academy.html" >IT Academy </a></li>
<li><a href="Pages/languagesense/languagesense.html" >Language Sense </a></li>
</ul>
</nav>
</body>
</html>