2 Replies Latest reply on Jun 13, 2017 11:37 PM by dominikae92095962

    empty space between nav and div - please help

    dominikae92095962

      Hi,

      There is a huge horizontal gap between the nav and #content div and I don't know how to get rid of it!!! Please help, I'm new to web design.

       

      HTML:

      <body>

      <header>

      <img src="./img/SIMPLE_banner-min.png" alt="SIMPLE banner">

      </header>

      <nav id='topnav'>

        <ul id="MenuBar1" class="MenuBarHorizontal">

          <li><a href="./index.html">About</a>    </li>

          <li><a href="./download_form.html">Download</a></li>

          <li><a href="./workflows.html">Workflows</a></li>

          <li><a href="./manuals.html">Manuals</a></li>

          <li><a href="./lab.html">Elmlund Lab</a></li>

          <li><a href="./publications.html">Publications</a></li>

          <li><a href="./contact.html">Contact </a></li>

        </ul>

      </nav>

       

      <div id="content">

      <!-- TemplateBeginEditable name="EditRegion1" -->

       

      <!-- TemplateEndEditable -->

      </div>

       

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

      </script>

      </body>

       

      CSS

      body {

        background-image: url(../images/nebula.jpg);

        background-attachment: fixed;

        margin: 0;

        background-color: #000000;

        background-repeat: repeat;

        font-family: Verdana, Geneva, sans-serif;

        font-size: 16px;

      }

       

      header {

        background-color: rgb(255,255,255);

        height: 110px;

        width: 830px;

        margin-right: auto;

        margin-left: auto;

        padding-left: 40px;

        padding-right: 40px;

        padding-bottom: 20px;

        padding-top: 20px;

      }

      #topnav {

        height: 480px;

        width: 910px;

        margin-right: auto;

        margin-left: auto;

        margin-bottom: 0px;

        margin-top: 0px;

      }

       

      #content {

        width: 830px;

        height: auto;

        margin-right: auto;

        margin-left: auto;

        margin-top: 0;

        padding-left: 40px;

        padding-right: 40px;

        position: relative;

        overflow: visible;

        margin-bottom: 0px;

        background-color: rgb(255,255,255);

      }

       

      Thanks!