Unable to put 0px margin - html

How to remove extra margin from the div tag.
I have already added margin and padding to 0px. Does positioning also matters in margin? Even if I want to give margin in this div, so in which unit should I give like in vw or percentage? Please help to resolve this issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>

This is happening because of browser defaults. Add the following to your stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar a{
text-decoration:none;
color: white;
}
#menubar ol {
margin:0;
padding:0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>

You have to specify the margin and padding of the HTML doc, and * (everything). See snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
/* FROM HERE */
*,
html {
padding: 0;
margin: 0;
}
/* TO HERE */
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
Hope this helps!

Try This:
ol {
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
ol {
margin: 0;
padding: 0;
}
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>

Related

How do i make all elements in my div tag responsible when changing the size (zooming in / out)

I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Place all navigation items inline

Webpage Screenshot:
/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}
/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}
.nav_align {
list-style-type: none;
display: inline;
}
.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}
.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}
.Main_Logo {
width: 150px;
height: 150px;
}
.nav_sm {
}
.sm_list {
}
.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}
.nav_search {
}
.nav_btns {
}
.nav_list {
}
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}
.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}
/*Navbar End */
<?php
require_once "Includes/db-Connect.php";
//session data will be here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<title>Game Informer - Home</title>
<nav class="navbar">
<ul class="nav_align">
<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>
<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>
<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">
<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>
<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>
<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>
</ul>
</div>
</li>
<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>
<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn">Home</li>
<li class="nav_btn">Questions</li>
<li class="nav_btn">Account</li>
<li class="nav_btn">Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
</head>
<hr>
<body>
<br>
<br>
<br>
<br>
<?php
require_once "Includes/db-Connect.php";
?>
<div class="sign_con">
<button class="sign_button">Sign In</button>
<button class="sign_button">Sign Up</button>
</div>
</body>
</html>
I am a computer science student and I need some help I can't get all my navigation items inline. I'm a huge beginner at this as it seems like a 2 minute fix but I am clueless as I've tried for about an hour now.
Add below css..
.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}
/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}
/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}
.nav_align {
list-style-type: none;
display: inline;
}
.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}
.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}
.Main_Logo {
width: 150px;
height: 150px;
}
.nav_sm {
}
.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}
.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}
.nav_search {
}
.nav_btns {
}
.nav_list {
}
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}
.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}
/*Navbar End */
<?php
require_once "Includes/db-Connect.php";
//session data will be here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<title>Game Informer - Home</title>
<nav class="navbar">
<ul class="nav_align">
<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>
<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>
<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">
<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>
<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>
<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>
</ul>
</div>
</li>
<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>
<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn">Home</li>
<li class="nav_btn">Questions</li>
<li class="nav_btn">Account</li>
<li class="nav_btn">Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
</head>
<hr>
<body>
<br>
<br>
<br>
<br>
<?php
require_once "Includes/db-Connect.php";
?>
<div class="sign_con">
<button class="sign_button">Sign In</button>
<button class="sign_button">Sign Up</button>
</div>
</body>
</html>
use these two changes
.nav_align {
list-style-type: none;
display:flex;
flex-direction: column;
}
use flexbox.
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
width:160px;
margin-top:20px;
text-align:center;
}
.nav_align {
list-style-type: none;
display: inline-block;
}

How to have ingrained navigation bar look?

I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>

How to make space between these 3 horizontal items

How to keep space between these three items on top?
I have tried few ways but when I try them they skip to next line. I have added the code I'm trying. And how to keep the size of width at 1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Where I want to make spaces is shown below:
You just need to add margin to the middle item ()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 10px;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>

When adding a second css tag to center the page, why does the navigation bar not move with the rest of the page?

I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.
<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>
<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>
<img src="img.png"></img>
</head>
<body>
<div id="menubar">
<ul
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
</body>
<body>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
<div id="items">
<ul>
<p>Item 1</p>
<p>Item 2</p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>
Heres the original CSS.
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}
To center the page, i add the following css code:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
And added these lines at the beginning and end of the page.
If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.
Works for me. The only problem is that your code structure. Your code format should be
body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>
<div id="items">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Correct css is:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
you had unnecessary buckles in your code.