This code is unique and belongs to me.
<html>
<head><title>HOME||~All About EDM~</title>
</head>
<body >
<center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center>
<center>
<style type="text/css" >
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
position:relative;
left:18%;
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-weight:bold;
color:#272525;
background-color:#DF01A5;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#272525;
font-weight:bold;
color:#DF01A5;
text-align:center;
}
</style>
</center>
<center>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="info.html">Info</a></li>
</center>
</body>
</html>
I am struggling to center 5 blocks in a row, instead they align as columns. I have tried multiple methods but can't seem to achieve the desired layout. Any suggestions?