Невозможно написать статью после вертикального меню в HTML

Question

Я пытаюсь написать свою статью рядом с моим вертикальным меню, но вся моя статья входит в это меню. Я хочу, чтобы мое меню было исправлено на этой странице с левой стороны, и все мои новые статьи или любые фотографии должны появиться после меню.

MY HTML

<nav id="wrapper-250"> 

    <ul class="accordion"> 

     <li id="one" class="files"> 

      <a href="#one">Health Beat</a> 

      <ul class="sub-menu"> 

       <li><a href="#"><em>01</em>Sub Menu 1</a> 

        <ul class="sub-sub-menu"> 

         <li><a href="#"><em>a</em>Sub Menu 2</a></li> 

         <li><a href="#"><em>b</em>Sub Menu 2</a></li> 

         <li><a href="#"><em>c</em>Sub Menu 2</a></li> 

         <li><a href="#"><em>d</em>Sub Menu 2</a></li> 

         <li><a href="#"><em>e</em>Sub Menu 2</a></li> 

        </ul> 

       </li> 

       <li><a href="#"><em>02</em>Sub Menu 1</a></li> 

       <li><a href="#"><em>03</em>Sub Menu 1</a></li> 

       <li><a href="#"><em>04</em>Sub Menu 1</a></li> 

       <li><a href="#"><em>05</em>Sub Menu 1</a></li> 

      </ul> 

     </li> 

     <li id="two" class="mail"> 

      <a href="#two">Mail</a> 

      <ul class="sub-menu"> 

       <li><a href="#"><em>01</em>Hotmail</a></li> 

       <li><a href="#"><em>02</em>Yahoo</a></li> 

      </ul> 

     </li> 

     <li id="three" class="cloud"> 

      <a href="#three">Cloud</a> 

      <ul class="sub-menu"> 

       <li><a href="#"><em>01</em>Connect</a></li> 

       <li><a href="#"><em>02</em>Profiles</a></li> 

       <li><a href="#"><em>03</em>Options</a></li> 

       <li><a href="#"><em>04</em>Connect</a></li> 

       <li><a href="#"><em>05</em>Profiles</a></li> 

       <li><a href="#"><em>06</em>Options</a></li> 

      </ul> 

     </li> 

     <li id="four" class="sign"> 

      <a href="#four">Sign Out</a> 

      <ul class="sub-menu"> 

       <li><a href="#"><em>01</em>Log Out</a></li> 

       <li><a href="#"><em>02</em>Delete Account</a></li> 

       <li><a href="#"><em>03</em>Freeze Account</a></li> 

      </ul> 

     </li> 

    </ul> 

</nav> 


<div id="body-part"> 
    <p> 
    </P> 

</div> 

http://codepen.io/anon/pen/XbXbqQ

Answer 1

Добавить большой набивка налево к вашему #body-part:

padding-left: 500px; /* example */ 

Demo здесь: http://jsfiddle.net/baLq1d1k/

Или вы можете сделать это с помощью JQuery, если width ваших #wrapper-250 изменений:

$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));