h2 を h1 のすぐ下に配置しようとしていますが、巨大なギャップ/スペースが作成されているようです。これを回避する特定の方法はありますか、それともコーディングのエラーですか? ありがとうございました。
サイトへのリンク: http://younani.com/armen/musicindex.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Armens website</title>
<meta charset="utf-8">
</head>
<body>
<div class="clearfix" id="container">
<p><link rel="stylesheet" href="armen.css" /></p>
<h1><i>Four To The Floor</i></h1>
<h2>Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br /> it’s where you take them to.” <br /> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian <a href="mailto:fttfmusic@gmail.com">fttfmusic@gmail.com</a> <a href="http://www.fttfmusic.com/">www.fttfmusic.com</a></p>
</div>
</div>
</body>
</html>
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 70px;
text-align: center; }
@font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }