網站佈局被搞砸了

我很難爲網站的標題，正文和其他部分創建單獨的容器。我不確定我的代碼不正確，但佈局不符合計劃。任何建議將不勝感激。網站佈局被搞砸了

<!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 PARKING AND SAVE UP TO 70%</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, 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.</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; } 
@font-face { font-family: "Helvetica Neue"; src: url url(../Images/HelveticaNeue.ttf); } 
@font-face { font-family: "Avenir"; src: url(../Images/AvenirLTStd-Light.otf); } 

/*--- 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; 
} 
/*--- Need to Fix This ---*/ 
/*---Need to Fix This ---*/ 
/*--- End Header Section ---*/ 


/*--- Begin City Picture Section ---*/ 
.container { 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 
#sfpic { 
    background-image: url(../Images/sf-downtown.jpg); 
    width: 750px; 
    height: 500px; 
    margin: 40px 0 0 0 ; 
    padding: 0; 
    display: block; 
    float: left; 
} 
#sfpic h1 { 
    font-family: "Avenir"; 
    letter-spacing: 1px; 
    color: #FFF; 
    margin: 425px 0 0 0; 
    font-size: 12px; 
    font-weight: 100; 
    text-align: center; 
} 
#sfpic h2 { 
    font-family: "Avenir"; 
    letter-spacing: 4px; 
    color: #FFF; 
    margin: 10px 0 0 0 ; 
    font-size: 36px; 
    font-style: normal; 
    font-weight: 100; 
    text-align: center; 
} 
.break1 { 
    padding: 4px 0 0 0 ; 
} 
/*--- End City Picture Section ---*/ 

/*--- Begin Ad Section ---*/ 
.ad { 
    background-image: url(../Images/sf-ad.jpg); 
    float: left; 
    width: 330px; 
    height: 500px; 
    margin: 40px 0 0 0 
} 
.ad h1 { 
    font-family: "Avenir"; 
    letter-spacing: 1px; 
    color: #FFF; 
    margin: 20px 0 0 0; 
    font-size: 12px; 
    font-weight: 100; 
    text-align: center; 
} 
.break2 { 
    padding: 0; 
} 
.ad h2 { 
    font-family: "Avenir"; 
    letter-spacing: 4px; 
    line-height: 1.5; 
    color: #FFF; 
    margin: 40px 0 0 0px ; 
    font-size: 30px; 
    font-weight: 100; 
    text-align: center; 
} 
.ad h3 { 
    font-family: "Avenir"; 
    letter-spacing: 4px; 
    line-height: 1.5; 
    color: #FFF; 
    margin: 0 0 0 0px ; 
    font-size: 30px; 
    font-weight: 100; 
    text-align: center; 
} 
.adbutton { 
    background-image: url(../Images/button-reserve.jpg); 
    height: 48px; 
    width: 160px; 
    font-family: "Helvetica Neue"; 
    font-size: 12px; 
    font-weight: 500; 
    letter-spacing: 1px; 
    color: #FFF; 
    margin: 50px 0 0 90px; 
    border:none; 
} 

.adbutton:hover { 
    background-image: url(../Images/button-reserve-hover.jpg); 
} 

.adbutton:active { 
    background-image: url(../Images/button-reserve-click.jpg) 
} 
/*--- End Ad Section ---*/ 

/*--- Begin First Text Section Below Pictures ---*/ 
.container p { 

}

http://jsfiddle.net/44z5a055/

來源

2015-12-12 Mike

我們不介意讀者。告訴我們你想要的和你遇到的錯誤。 –

對不起，我想在右上角顯示導航鏈接左上角的徽標。下面應該是圖片，裏面有「Welcome to ... san fran。text」，右邊是廣告..下面是這兩段文字 – Mike

我遇到的錯誤是導航鏈接是落在徽標下方，文字位於「歡迎來到...」圖片下方。並且廣告在文字下方。 – Mike