I am encountering challenges in creating distinct containers for the header, body, and other sections of my website. The layout is not turning out as planned, and I can't pinpoint where my code is going wrong. Any advice or suggestions on how to resolve this issue would be immensely appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>San Francisco | Downtown Parking Guide</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<div class="container">
<nav class="cf">
<ul>
<li><a href="index.html" class="logo" title="Home Page"></a></li>
<li><a href="index.html" title="Home Page" class="">Home</a></li>
<li><a class="bar">|</a></li>
<li><a href="#" title="Downtown Parking List">Downtown Parking List</a></li>
</ul>
</nav>
</div>
<!-- End Header -->
<!-- Begin San Francisco Image -->
<div class="container">
<div id="sfpic">
<h1>WELCOME TO THE</h1>
<div class="break1"></div>
<h2>SAN FRANCISCO PARKING GUIDE</h2>
</div>
<!-- End San Francisco Image -->
<!-- Begin Ad -->
<div class="ad">
<h1>SPECIAL DEALS</h1>
<div class="break1"></div>
<h2>RESERVE</h2>
<h3>SAN
Francisco is a cultural, commerical, and financial center in Northern California and the only consolidated city in Northern California. San Francisco is known as a popular tourist destination due to it's cool summers, fog, steep hills, eclectic mix of architecture and landmarks including the Golden Gate Bridge, cable cars, Alcatraz, and Chinatown.</h3>
<button type="button" class="adbutton">RESERVE NOW</button>
</div>
</div>
<!-- End Ad -->
<!-- Begin Text Below Picture & Add -->
<div class="container">
<div class="break1"></div>
<p>San Francisco is a cultural, commercial, and financial hub located in Northern California. Known for its unique blend of architecture, landmarks and attractions such as the Golden Gate Bridge, cable cars, Alcatraz, and Chinatown, the city attracts visitors from around the world due to its pleasant weather and scenic views.</p>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
html {
background: #ffffff; }
body {
font-family: "Helvetica Neue", Times, serif;
width: 75%;
margin: 0 auto; }
/*--- Begin Header Section ---*/
.logo {
display: block;
padding: 0;
margin: 30px 330px 0 20px;
background-image: url(../Images/DPG-Logo.jpg) ;
width: 406px;
height: 28px;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table; }
.cf:after {
clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1; }
/*horizontal menu styles*/
nav {
background: #FFF }
ul, li {
margin : 0;
padding: 0;
list-style: none;
float: left;
}
ul {
background: none;
height: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
li a {
display: block;
line-height: none;
padding: 0;
color: #8b9093;
text-decoration: none;
margin: 36px 0 0 30px;
}
li a:hover {
color: #FE5A1D;
}
li a:active {
color: #d74c18;
}
.bar {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
a.bar:hover{
color: #8b9093;
}
...
.adbutton:hover {
background-image: url(../Images/button-reserve-hover.jpg);
}
.adbutton:active {
background-image: url(../Images/button-reserve-click.jpg)
}
/*--- End Ad Section ---*/