Hey guys, right now i have 4 li's which all start on the left hand side of my webpage but i want to move them in the middle of the page and then put my logo in the middle of those 2 but i have no idea what code to implement on my html and css to do this. Right now i have set my li's to float: left; but when i try to set it to center the whole layout of them changes and they go one below each other. Can anyone help me out please. Below i have included my whole html and css code.
<!DOCTYPE html>
<html>
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="Homepage.css">
<script type="text/javascript" href="Homepage.js"> </script>
<link href='https://fonts.googleapis.com/css?family=Raleway:700
|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page">
<div id="navbar">
<ul>
<li><a href="#BasicInfo"> Basic Information</a></li>
<li><a href="#CV"> CV</a></li>
<li><a href="#Portfolio"> Portfolio</a></li>
<li><a href="#Report"> Report</a></li>
</ul>
</div>
<div id="intro">
<h1> Muhammed Hussain </h1>
<h2 id="tagline"> I am a Computer Science student </h2>
</div>
<div class="text" id="Basic Information">
<h3 class="headers"> Basic Information </h3>
<p>In this section i will have some information about myself. <br>
For my finished website i'd like to make it responsive, so that it alters and readjusts
well to different screen sizes. I'd also like to include a gallery that uses javascript as
i haven't used any javascript on this site yet. <br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</br></br></br></p>
</div>
<div class="text" id="CV">
<h3 class="headers"> CV </h3>
<p>
Here i will have my twitter, instagram and facebook feed <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi.
</br></p>
</div>
<div class="text" id="Portfolio">
<h3 class="headers"> Portfolio </h3>
<p>
Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</br></p>
</div>
<div class="text" id="Report">
<h3 class="headers"> Report </h3>
<p>
Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</br></p>
</div>
<br>
<br>
</body>
</html>
#page {
margin: auto;
max-width: 85%;
font-family: 'Arya', sans-serif;
color: white;
padding-top: 45px;
}
#intro {
padding-top: 50px;
font-family: 'Nunito', sans-serif;
text-transform: uppercase;
height: 300px;
background-image: url("GoldsmithsPic.jpg.jpg");
background-repeat: repeat-x;
background-position: bottom right;
/*background-color: #5c5c5c; */
font-family: 'Signika', sans-serif;
text-align: center;
padding-left: 10px;
}
h1 {
font-size: 5em;
color: black;
letter-spacing: 10px;
padding-top: 40px;
margin: 0;
}
h2 {
font-size: 5em;
color: black;
letter-spacing: 5px;
padding-top: 40px;
margin: 0;
}
#tagline {
font-size:1.5em;
padding-top: 0px;
letter-spacing: 4px;
margin: 0;
}
#title {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
color: #434343;
}
#navbar {
position: fixed;
top: 0;
left: 0;
right:0;
z-index: 9999;
width: 100%;
max-width: 85%;
margin-left: 7%;
opacity: 0.8;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-top; 10px;
overflow: hidden;
background-color: white;
margin-bottom: 20px;
}
li {
float: left;
}
li a {
display: block;
color: #5c5c5c;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
}
li a:hover {
background-color: #5c5c5c;
color: white;
}
.headers {
font-family: 'Arya', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
}
.text {
background-color: #5c5c5c;
}
p {
text-indent: 3%;
max-width: 95%;
margin: auto;
}
h3 {
max-width: 95%;
margin-left: 5px;
}</br></br></div>
Submit an article or tip