我想學習HTML 5，我想重現我當前最喜歡的遊戲Camel Up（或Camel Cup）的規則，並試圖成爲一個好人，而不僅僅是使用表，這就是我想實現如何佈局使用DIV的HTML 5

這就是我得到

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>CamelCup Rules</title> 
     <style> 
      body {background-color:#f3d7a0; font-family:cursive} 
      #wrapper {width:1000px} 
      .float-left { float:left;width:40%;padding-right:5px;padding-left:5px;} 
      .float-right {float:right;width:40%;padding-right:5px;padding-left:5px;} 
      #banner-text{ font-size: smaller;} 
      .red-label {font-size:medium; color:red;vertical-align:top} 
      h1 {color:red; text-align: center; font-size:40px} 
      .full-width {width="100%";} 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <header> 
      <div class="full-width"> 
       <div id="logo" class="float-left"> 
        <img src="logo.PNG"> 
       </div> 
       <div id="banner-text" class="float-right"> 
        <p> 
        Witness the craziest camel race of all time, as things really go topsy-turvy when 
    camels stack up and entire pyramids turn upside down. 
    As members of Egyptian high society, you gather in the desert with one simple 
    goal: to gain the most money by backing the right camel to win a leg or even the 
    entire race. However, in this race, it’s not just the lucky ones who can beat the 
    odds. Reading the dynamics of the race and having a good sense of timing is just as 
    important when it comes to backing the right camels and taking the victory. 
        </p> 
       </div> 
       </div> 
      </header> 
      <section id="contents" class="full-width"> 
       <h1>Components</h1> 
       <div id="pyramid" class="float-left"> 
        <label class="red-label">1 Pyramid</label> 
        <img src="pyramid.png"> 
       </div> 
      </section> 

     </div> 
    </body> 
</html>

，如果我讓可變寬度和擴大我的兄弟wser它看起來像這樣（這是針對一個答案告訴我，使其寬度可變，但我看不到的地方添加圖片評論）