Hello, I am currently working on a Dreamweaver site and have created a CSS style sheet within my template that includes a div tag called #HeaderBox. My goal is to make this box 40% of the screen's size, with specific pixel dimensions if necessary. I am trying to center this box, but unfortunately, the <center> tag does not seem to be working. Here is the code snippet from the template:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="HeaderBox"></div>
</center>
</body>
<html>
And here is the corresponding code from styles.css:
@charset "utf-8";
#HeaderBox {
font-family: "Lucida Console", Monaco, monospace;
font-size: 24px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-decoration: underline;
background-position: center 40px;
border: 2px groove #CC6;
top: 0px;
text-align: center;
vertical-align: 10%;
width: 40%;
padding: 0%;
}
I appreciate any help or guidance you can provide. Thank you.