title: Vertical Nav Bar Moving over Other Parts of Website / Remove Scroll Bar
body: <p>I have two specific questions concerning my website for my class.</p>
  
  <p>First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.<br>
  <a href="https://i.stack.imgur.com/ZSHxk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZSHxk.png" alt="enter image description here"></a></p>
  
  <p>Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right.  This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections.  However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.</p>
  
  <p>Here is the Theme.html page code below.  I only included the first "section" for brevity's sake.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon"&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;
  &lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;title&gt;Rolling Solo Theme/Genre&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" href="rollingsolo.css" type="text/css"&gt;
  &lt;meta name="viewport"
  content="width=device-width, initial-scale=1.0"&gt;
  &lt;script src="js/float-panel.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;header&gt;
  &lt;div id="header"&gt;
  &lt;h1&gt;Rolling Solo&lt;/h1&gt;
  &lt;h2&gt;"I Roll Solo"&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div id="headings"&gt;
  &lt;h1&gt;Board Games Theme &amp;amp; Genre&lt;/h1&gt;
  &lt;/div&gt;    
  
  &lt;div id="nav" class="float-panel"&gt;
  &lt;nav class="navigation"&gt;&lt;!--Added .navigation--&gt;
  &lt;ul class="mainmenu"&gt;&lt;!--Added .mainmenu--&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="theme.html"&gt;Theme/Genre&gt;&lt;/a&gt;
          &lt;ul class="submenu"&gt;&lt;!--Added .submenu--&gt;
              &lt;li&gt;&lt;a href="#Horror"&gt;Horror&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Sci-Fi"&gt;Sci-Fi&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Survival"&gt;Survival&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Pirate"&gt;Pirate&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#RPG"&gt;RPG/Fantasy&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Space"&gt;Space&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Apocalypse"&gt;Nuclear Apocalypse&lt;/a&gt;&lt;/li&gt;  
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="top.html"&gt;Top Solo Games of 2017&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="variants.html"&gt;Variants&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;main&gt;
      &lt;section id="Horror"class="sections"&gt;&lt;h3&gt;Horror&lt;/h3&gt;
      &lt;hr&gt;
      &lt;a href="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg"&gt;&lt;img  src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images"&gt;&lt;/a&gt;
      &lt;p&gt;Arkham Horror is a great deck building game.&lt;/p&gt;
      &lt;br&gt;
      &lt;a href="theme/Kingdom%20Death-Monster(medium).jpg"&gt;&lt;img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images"&gt;&lt;/a&gt;
      &lt;p&gt;This game was a mega-hit during its Kickstarter campaign last year.  Extremely in demand and a great buy, if you can get your hands on it.&lt;/p&gt;
      &lt;br&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it. </p>
  
  <p>Here is my CSS code below for the theme/genre's sections and navigation code:</p>
  
  <pre><code>.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
         border-width: 10px;
         border-color: #1D3D94;
         padding-left: 20px;
         padding-right: 20%;
         overflow:auto;}
  
  .images {float: left;   /*adjust the pics in the Theme/Genre Sections*/   
       padding-top: 10px;
       padding-right: 10px;}
  
   #nav {float: left; width: 200px; margin: 10px 0;}
  
  /* define a fixed width for the entire menu */
  .navigation {width: 190px;} 
  
  /* reset the lists to remove bullet points and padding */
  .mainmenu, .submenu {list-style: none;
                   padding: 0;
                   margin: 0;}
  
  /* make ALL links (main and submenu) have padding and background color */
  .mainmenu a {display: block;
           background-color: #CCC;
           text-decoration: none;
           padding: 10px;
           color: #000;}
  
  /* add hover behavior */
  .mainmenu a:hover {background-color: #C5C5C5;}
  
  /* when hovering over a .mainmenu item,
  display the submenu inside it.*/
  .mainmenu li:hover .submenu {display: block;
                           max-height: 200px;}
  
  /*Now, overwrite the background-color for .submenu links only.
  .submenu a {background-color: #999;}
  
  /* hover behavior for links inside .submenu */
  .submenu a:hover {background-color: #666;}
  
  /* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.*/
  .submenu {overflow: auto;
        max-height: 0;
        -webkit-transition: all 0.5s ease-out;}
  </code></pre>
  
  <p>Is there any way to <em>permanently</em> move these sections to the right out of the way of the nav bar?</p>
  
  <p>Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar.  As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest. <a href="https://i.stack.imgur.com/maFHT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/maFHT.jpg" alt="enter image description here"></a></p>
  
  <p>How do I remove the scroll bar and show ALL seven sub-directories?</p>
  
  <p>Thanks a lot for any and all help you may give.  I do appreciate it.</p>