Encountering a problem with a h1 element not remaining within its parent div. Strangely, it remains contained until the font size of the h1 surpasses a certain threshold, causing it to spill out of the div and overlap with other content. Here is the snippet of my HTML and CSS code. I also utilize the Eric Meyer reset sheet and a custom font style sheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lawrence Chabela - User Interface Design</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="siteWrap">
<div class="nav clearfix">
<ul class="clearfix">
<li>
Home<span>is where I work.</span>
</li>
<li>
About<span>this dude.</span>
</li>
<li>
Folio<span>take a peek.</span>
</li>
<li>
News<span>whats going on.</span>
</li>
<li>
Contact<span>got some work?</span>
</li>
</ul>
</div>
<div class="slogan">
<h1>Why Is this h1 not staying in here</h1>
</div>
</body>
/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
.siteWrap { width: 1024px; margin: 0 auto; }
.nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
.nav ul { margin: 0 auto; width: 94%; }
.nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
.nav li:last-child { padding: 0; }
.nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
.slogan { text-transform: uppercase; }