Проблемы с отображением меню

@novi4ek1 · Регистрация: 28.05.2016

Author24 — интернет-сервис помощи студентам

Решил попробовать сверстать свою первую HTML страницу. Все началось отлично, сверстал меню все как нужно, но потом оно исчезло, подскажите в чем причина.
Код:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Landing Page BOUNCY</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="header">
<div class="logo">
<h1>BOUNCY</h1> 
</div>
<div class="menu">
<ul class="menu">
    <li class="menu"><a href="/">Home</a></li>
    <li class="menu"><a href="/">About</a></li>
    <li class="menu"><a href="/">Services</a></li>
    <li class="menu"><a href="/">Portfolio</a></li>
    <li class="menu"><a href="/">Team</a></li>
    <li class="menu"><a href="/">Blog</a></li>
    <li class="menu"><a href="/">Contact</a></li>
</ul>   
 
</div>
 
</section>
 
</body>
</html>

CSS

@font-face {
    font-family: BIG JOHN;
    src: url(fonts/BIG JOHN.otf); 
 
}
#header {
    height: 715px;
    width: 100%;
    background: url(img/head-bg.jpg) no-repeat;
    margin: 0;
}   
h1 {
    color: #fff;
}
 
.logo {
width:100px;
height: 100px;
color: #fff;
font-weight: bold;
padding-left: 100px;
padding-top: 43px;
float: left;
}
.menu{
padding-left: 720px;
    padding-top: 68px;
    float: none;
    
}
ul{
    list-style: none; 
  margin: 0; /
  padding-left: 0; 
}
a{
text-decoration: none;
color: #fff;
font-size: 17px;
}
a:hover {
    border:2px solid white;
    border-radius: 30%;
    padding: 4px;
 
 
 
}
li {
    display: inline;
    padding: 10px;
}
p {
    color: #fff;
}
.slide{
    text-align: center;
}

@evgeniyd · 28.09.2016, 01:55

Что значит исчезло?

@novi4ek1 · 28.09.2016, 01:57 **[ТС]**

Его нет на странице index.html

@boilzzz · 28.09.2016, 01:57

novi4ek1, А вас не настаоржило что появилась полоса прокрутки?
У вас есть класс

CSS

.menu{
padding-left: 720px;
    padding-top: 68px;
    float: none;
    
}

в это классе, отступ внутренний слева 720px, класс .menu у вас задан 9 раз, 720+720+720, вотна столько пикселей уехало ваше меню в право, убери padding-left: 720px; и все нармолизутсяпесочница

CSS

@font-face {
    font-family: BIG JOHN;
    src: url(fonts/BIG JOHN.otf); 
 
}
#header {
    height: 715px;
    width: 100%;
    background: url(img/head-bg.jpg) no-repeat;
    margin: 0;
    background:red;
}   
h1 {
    color: #fff;
}
 
.logo {
width:100px;
height: 100px;
color: #fff;
font-weight: bold;
padding-left: 100px;
padding-top: 43px;
float: left;
}
.menu{
 
    padding-top: 68px;
    float: none;
    
}
ul{
    list-style: none; 
  margin: 0; /
  padding-left: 0; 
}
a{
text-decoration: none;
color: #fff;
font-size: 17px;
}
a:hover {
    border:2px solid white;
    border-radius: 30%;
    padding: 4px;
 
 
 
}
li {
    display: inline;
    padding: 10px;
}
p {
    color: #fff;
}
.slide{
    text-align: center;
}

HTML5

<section id="header">
<div class="logo">
<h1>BOUNCY</h1> 
</div>
<div class="menu">
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Services</a></li>
    <li><a href="/">Portfolio</a></li>
    <li><a href="/">Team</a></li>
    <li><a href="/">Blog</a></li>
    <li><a href="/">Contact</a></li>
</ul>   
 
</div>
 
</section>

@evgeniyd 29 / 29 / 11 Регистрация: 10.05.2016 Сообщений: 111
	28.09.2016, 01:55	2
	Что значит исчезло? 0

@novi4ek1 0 / 0 / 0 Регистрация: 28.05.2016 Сообщений: 21
	28.09.2016, 01:57 [ТС]	3
	Его нет на странице index.html 0