I am new to html and css, I started making my own website and I have encountered a problem, my navigation bar is taking the full width of the page, I want to add the content of the page centered next to my vertical navigation bar.

html:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
        <div class="logoBar">   
            <div class="helper">        
                <div class="logo"></div>
            </div>
        </div>

        <div id="vmenu"> 
            <ul> 
              <li><a href="">Acceuil</a></li> 
              <li><a href="">Identification</a></li> 
              <li><a href="">Mon Parcours</a></li> 
              <li><a href="">Ma Formation</a></li> 
              <li><a href="">Mes Projets</a></li> 
              <li><a href="">Dossier de Veille</a></li> 
              <li><a href="">Contact Me</a></li> 
            </ul>   
        </div> 

        <div class="content">
        </div>

</body>
</html>

```

css:

```
body{
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

.logoBar{ 
    background:url(../img/LogoBar.png) ;
    height:150px;   
    position:relative;

}

.helper{
    height:120px;
    width:100%;
    display: table;
}

.logo{  
    background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;
}

div#vmenu { 
   margin: 0; 
   padding: .25em 0em .25em 0em; 
   border: solid 1px #30c9e0; 
   background: #7895A2; 
   width: 13.5em; 

} 

div#vmenu ul { 
   margin: 0; 
   padding: 0; 
   list-style: none;

} 

div#vmenu ul li { 
   margin: 0; 
   padding: 0; 
   list-style: none; 

} 

div#vmenu ul a:link { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none; 
   font-size:17pt;   
   background-color: #7895A2; 
   color: #0059a0; 
   display: block; 

} 

div#vmenu ul a:active { 
   margin: 0; 
   padding: .25em .5em .25em .5em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt;
   background: #4d8cba; 
   color: #ffffff; 
   display: block; 
} 

div#vmenu ul a:visited { 
   margin: 0; 

   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt; 
   background: #4d8cba; 
   color: #ffffff; 
   display: block; 
} 

div#vmenu ul li a:hover { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt;
   background-color: #30c9e0; 
   color: #ffffff; 
   display: block; 
} 

.content{
  width: 700px ;
  height:50px;
  margin-left: auto ;
  margin-right: auto ;
  border: 1px solid black;
  background-color:black;
  text-align:center;

}

```