I've been working on a coding assignment and struggling to get my links in the navigation bar to appear next to each other. They currently display as blue, underlined links stacked on top of one another. Below are my HTML and CSS codes. If anyone could assist me, I would greatly appreciate it.
HTML:
<!doctype html>
<html class="no-js" lang="">
<head>
<style>
body{ background-image: url("js/images/htmlbackground.jpeg");
}
</style>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Courtney Geller</title>
<meta name="The works of Courtney Geller" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">
<!--the information cascades down to the classes below! -->
<!-- you have to put all your styles and things into this so that the file can find it in this folder! This is where it looks for everything!-->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class= "maincontainer">
<div class="navBar">
<div id="nav_wrapper">
<div><ul><li><a href=" ftp://locomoku.com/courtney-geller/Project%201-Home/index.html">About Me</a></li></ul>
<li><a href="courtneygellerphotography.tumblr.com">My Work</a></li>
</ul></div></div>
</div>
<div class= "mainpicture">
<img src="js/images/frontimage.png" alt= "Front image" height="200" width= "350">
</div>
<div>
<p class="more"; text-align: center;>I'm Courtney, I'm from Maine and I'm a certified weather spotter. My major is Art, Technology and Culture at the University of Oklahoma, and my minor is Meteorology.<br>I like baking, knitting, weather, and mozzarella sticks.<br>For more about me and some of my work, click the links above.</p>
</div>
<script type="text/javascript" accesskey="" ></script>
<image: src = "js/images/htmlbackground.jpeg">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
CSS:
body {
background-color: #ffffff;
margin: 0;
font-family: sans-serif;
font-size: 18px;
display: inline-block;
}
.more {
margin-left: 430px;
margin-right: 300px;
margin-top:265px;
color: #ffffff;
font-size:15px;
text-align:center;
}
.navBar{
background-color: #222;
display: inline-block;
}
#nav_wrapper{
width: 960px;
margin: 0 auto;
text-align: left;
display: inline-block;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
#nav ul li{
display: inline-block;
}
#nav ul li:hover{
background-color: #ccc;
}
#nav ul li a, visited{
background-color: white;
color: #ff903f;
border: 2px solid none;
padding: 10px 20px;
margin-left:460px;
margin-top: 100px;
text-align: center;
text-decoration: none;
position:relative;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
.mainpicture{
position: absolute;
top: 135px;
left: 430px;
}