My goal is to create a layout similar to the one shown in this image: https://i.sstatic.net/DaXa0.png where there is one container for the top information and another container for links like NEWS.
The issue I am facing is that the links are not staying in a horizontal layout.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#tabLinks{
list-style-type: none;
font-size: 14px;
line-height: 18px;
overflow-y:scroll;
margin: 0 auto;
position: relative;
/*width: 890px;*/
}
#tabLinks li ul {
list-style-type: none;
/*margin: 010px 0 ;*/
display: inline;
padding: 10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="tabLinks">
<ul>
<div = class="a">
<li><a href="index.html">Home</a</li>
<li><a href=Blog.html>Blog</a></li>
<li><a href=Terms.html>Terms</a></li>
<li><a href=Privacy.html>Privacy</a></li>
</div>
</ul>
</div>