title: Why does only half of my button work?
body: <p>I have some buttons on a site i am making, but when i make the buttons wider they get wider, but only the first half of them are clickable and i dont know what the problem is?</p>
  
  <p>This is the javascript code and i don't think that's the problem.</p>
  
  <pre><code>// this is where the main JavaScript and some jQuery runs to make the site work
  
  // variable with your'e money
  var money = 0;
  var totalTimesClicked = 0;
  
  
  // Hide all buttons
  $("#but1").hide();
  $("#but2").hide();
  $("#but3").hide();
  $("#but4").hide();
  $("#but5").hide();
  $(".codeLines").hide();
  
  // function used to generate money
  function getmoney(income) {
      money = money + income;
  }
  
  // automatically makes money untill 100 money
  window.setInterval(function(){
      if (money &lt; 100) {
          getmoney(0.1);
      }
  // automatically makes money untill 500 money
      else if (money &gt; 100 &amp;&amp; money &lt; 500) {
          getmoney(0.05)
      }
      document.getElementById("money").innerHTML = Math.round(money*10)/10;
  }, 100)
  
  // make the click to make money button appear when you have more money than 10
  var buldings1_appear = setInterval(function(){
  if (money &gt;= 9) {
  $("#but1").slideDown("slow");
  }
  // make the auto income button appear when you have more money than 20
  if (money &gt;= 20) {
  $("#but4").slideDown("slow");
  }
  },1000)
  
  var clickEffect = 1;
  // the click to make money function
  
  $("#but1").click(function(){
      getmoney(clickEffect);
      totalTimesClicked = totalTimesClicked + clickEffect;
          document.getElementById("money").innerHTML = Math.round(money*10)/10;
          document.getElementById("totalTimesClicked").innerHTML = totalTimesClicked;
  $("#but2").slideDown("slow");
  });
  
  // make more money by clicking on button 1
  var clicks = 0;
  $("#but2").click(function(){
      var cost = 50;
      var multiplyBut1Cost = Math.floor(cost*Math.pow(1.3,clicks));
      if (money &gt;= multiplyBut1Cost) {
          money = money -  multiplyBut1Cost;
          clickEffect = clickEffect + 1;
          clicks = clicks + 1;    
      document.getElementById("money").innerHTML = Math.round(money*10)/10;
      document.getElementById("clickEffect").innerHTML = clickEffect;
      if (clicks &gt;= 5) {
  $("#but3").slideDown("slow");
      }
  }
  var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, clicks)));
      document.getElementById("multiplyBut1Cost").innerHTML=multiplyBut1NextCost;
  
  })
  
  var but3clicks = 0;
  $("#but3").click(function(){
      var cost = 1000;
      var multiplyBut1Cost2 = Math.floor(cost*Math.pow(1.2, but3clicks));
      if (money &gt;= multiplyBut1Cost2) {
          money = money -  multiplyBut1Cost2;
          clickEffect = clickEffect + 5;
          but3clicks = but3clicks + 1;    
      document.getElementById("money").innerHTML = Math.round(money*10)/10;
      document.getElementById("clickEffect").innerHTML = clickEffect;
  }
  var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, but3clicks)));
      document.getElementById("multiplyBut1Cost2").innerHTML=multiplyBut1NextCost;
  
  })
  
  var effect = 0.1;
  var but4income = 0;
  var but4bought = 0;
  var but4spawned = 0;
  function buyBut4(){
      var cost = 25;
      var but4cost = Math.floor(cost*Math.pow(1.2,but4bought));
          if(money&gt;=but4cost){
          but4bought = but4bought+1;
          money = money - but4cost;
          but4income = (but4bought + but4spawned) * effect;
          document.getElementById("but4bought").innerHTML = but4bought;
          document.getElementById("money").innerHTML = money;
  if (but4bought &gt;= 5) {
      $("#but5").slideDown("slow");
  }
  
  }
      var nextCost = Math.floor(cost*Math.pow(1.2,but4bought));
      document.getElementById("but4cost").innerHTML = nextCost;
  };
  
  setInterval(function(){
      getmoney((but4bought + but4spawned) * effect)
  document.getElementById("money").innerHTML = Math.round(money*10)/10;
  
  },100)
  
  var but5effect = 0.001;
  var but5bought = 0;
  var but5income = 0;
  function buyBut5(){
      var cost = 1000;
      var but5cost = Math.floor(cost*Math.pow(1.4,but5bought));
          if(money&gt;=but5cost){
          but5bought = but5bought+1;
          money = money - but5cost;
          but5income = but5bought * but5effect;
          document.getElementById("but5bought").innerHTML = but5bought;
          document.getElementById("money").innerHTML = money;
          document.getElementById("but5income").innerHTML = Math.round(but5income * 1000)/100;
      };
      var nextCost = Math.floor(cost*Math.pow(1.4,but5bought));
      document.getElementById("but5cost").innerHTML = nextCost;
  };
  
  setInterval(function(){
      but4spawned = but4spawned + but5bought * but5effect; 
      but4income = (but4bought + but4spawned) * effect;
      document.getElementById("but4spawned").innerHTML = Math.round(but4spawned*10)/10;
      document.getElementById("but4income").innerHTML = Math.round(but4income * 100)/10;
  },100)
  
  
  
  
  
   Window.onload = function supportsLocalStorage() {
        try {
          return 'localStorage' in window &amp;&amp; window['localStorage'] !== null;
        } catch(e){
          return false;
        }
      }
  
  function saveGame(){
      localStorage.setItem('money', JSON.stringify(money));
  }
  
  function loadGame(){
      money = JSON.parse(localStorage.getItem('money'))
      console.log(localStorage.getItem('money'))
      document.getElementById("money").innerHTML = localStorage.getItem("money");
  }
  
  function makeMoneySite(){
      $(".buildings").show("slow");
      $(".upgrades").hide("slow");
  }
  
  function upgradesSite(){
      $(".buildings").hide("slow");
      $(".upgrades").show("slow");
  }
  
  // Window.onload(loadGame());
  </code></pre>
  
  <p>Here is the css and i think the problem could be here</p>
  
  <pre><code>h1 {
      font-size: 22px;
      font-weight: bold;
  }
  
  .resources ul {
      list-style-type: none;
      font-size:18px;
  }
  
  .tabs ul li {
      list-style-type: none;
      float: left;
      font-size: 20px;
      font-weight: bold;
      padding-left: 5%;
      position: relative;
  }
  
  .saveButton ul{
      padding: 5%;
      width: 60%;
      position: absolute;
      text-align: right;
      font-size: 16px;
      margin-left: 10%;
      margin-bottom: 1%;
      list-style-type: none;
  }
  
  .buildings ul {
      list-style-type: none;
      float: left;
  }
  
  
  .buildings button {
      width: 300px;
      height: 64px;
  }
  
  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .buildings button .tooltiptext {
      visibility: hidden;
      width: 300px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
  
      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .buildings button:hover .tooltiptext {
      visibility: visible;
  }
  </code></pre>
  
  <p>Or maybe the problem is here
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Increment&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- the header --&gt;
  &lt;h1&gt; U will automatically gain 1 money untill you have 100 money and 0.5 money between 200 and 500 money &lt;/h1&gt;
  
  &lt;!-- the class with the resources u need to play the game --&gt;
  &lt;div class="resources"&gt;
  &lt;ul&gt;
      &lt;li&gt; Money &lt;span id="money"&gt; 0 &lt;/span&gt;&lt;/li&gt;
      &lt;li&gt; Money made by clicking &lt;span id="totalTimesClicked"&gt; 0 &lt;/span&gt;&lt;/li&gt;
      &lt;li class="codeLines"&gt; Lines of code &lt;span id="linesOfCode"&gt; 0&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="tabs"&gt;
  &lt;ul&gt;
  &lt;li onclick="makeMoneySite()"&gt; Buildings&lt;/li&gt;
  &lt;li onclick="upgradesSite()"&gt; Upgrades &lt;/li&gt;
  &lt;li&gt; Prestige &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="saveButton"&gt;
  &lt;ul&gt;
      &lt;li&gt; &lt;button onclick="saveGame()"&gt; Save your progress&lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button onclick="loadGame()"&gt; Load a previous game&lt;/button&gt; &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;!-- class with the first row of buttons --&gt;
  &lt;div class="buildings"&gt;
  &lt;ul class="clickerBuildings"&gt;
  &lt;!-- the click to make money button with the tooltip inside of it --&gt;
      &lt;li&gt;
          &lt;button id="but1"&gt; Click here to make money &lt;p class="tooltiptext"&gt;By clicking here u make &lt;span id="clickEffect"&gt; 1 &lt;/span&gt; money per click&lt;/p&gt;&lt;/button&gt;
      &lt;/li&gt;
  
  &lt;!-- the button to make the click button more effecient with the tooltip inside of it --&gt;
      &lt;li&gt;
          &lt;button id="but2"&gt; Make the click button better &lt;p class="tooltiptext"&gt; Click here to make 1 more money per click on the click button above at the cost of &lt;span id="multiplyBut1Cost"&gt; 50 &lt;/span&gt; money &lt;/p&gt;&lt;/button&gt;
      &lt;/li&gt;
  
  &lt;!-- the button to make the click button super effecient with the tooltip inside --&gt;
      &lt;li&gt;
          &lt;button id="but3"&gt; Make the click button even better! &lt;p class="tooltiptext"&gt; Click here to make 5 more money per click on the click button above at the cost of &lt;span id="multiplyBut1Cost2"&gt; 1000 &lt;/span&gt; money &lt;/p&gt; &lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;ul class="autoincome"&gt;
      &lt;li&gt;
          &lt;button id="but4" onclick="buyBut4()"&gt; Click this to make automatic income &lt;p class="tooltiptext"&gt;The automatic income costs &lt;span id="but4cost"&gt; 25 &lt;/span&gt; &lt;br&gt; You have bought &lt;span id="but4bought"&gt;0 &lt;/span&gt; automatic income machines and spawned &lt;span id="but4spawned"&gt; 0 &lt;/span&gt; but4's &lt;br&gt; But4 total income &lt;span id="but4income"&gt; 0&lt;/span&gt; per second&lt;/p&gt;&lt;/button&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;button id="but5" onclick="buyBut5()"&gt; Click here to spawn but4's &lt;p class="tooltiptext"&gt; The but5 costs &lt;span id="but5cost"&gt; 1000 &lt;/span&gt; &lt;br&gt;Your &lt;span id="but5bought"&gt; 0 &lt;/span&gt; but5's spawns &lt;span id="but5income"&gt; 0 &lt;/span&gt; but4's per second &lt;/p&gt;&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  
  
  
  
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>