I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any assistance you could provide would be greatly appreciated.
HTML:
<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:
/******************Custom Styles********************/
@font-face
{
font-family: stainy;
src: url(../font/stainy.ttf);
}
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:149px;
position:relative;
width: 100%; min-width: 960px;
}
.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 2px #30c9e0;***/
width: 13.5em;
float:left;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
color: #6F8083;
font-family: stainy;
}
div#vmenu ul a:link {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:23pt;
color: #6F8083;
font-family:stainy;
display: block;
}
div#vmenu ul a:active {
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
color: black;
font-family: stainy;
font-size:23pt;
}
div#vmenu ul a:visited {
margin: 0;
color: #6F8083;
font-family: stainy;
text-decoration: none;
font-size:23pt;
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:24pt;
background-color: #30c9e0;
color: black;
}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:white;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}