Я начинающий верстальщик. Верстав макет я столкнулся с следующей проблемой : сверху появляется отступ.
Вот HTML :
<!Doctype HTML>
<html>
<head>
<title>Какой-то сайт</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS\first.css">
</head>
<body>
<div class="header">
<div class="head1">
<h1 class="FirstLogo">The first page</H1>
</div>
<div class="meny">
<ul>
<li><a href=''>Главная</a></li>
<li><a href='Page/About.html'>О нас</a></li>
<li><a href=''>Контакты</a></li>
</ul>
</div>
</div>
<hr>
<div class="content">
<img class="photo" src="Image/3.png" height=500px; width=500px;>
<h2 align="left">Видео</h2>
<p >Видео предоставляет прекрасную возможность подтвердить свою точку зрения. Чтобы вставить код внедрения для видео, которое вы хотите добавить, нажмите "Видео в сети".Вы также можете ввести ключевое слово, чтобы найти в Интернете видео, которое лучше всего подходит для вашего документа.</p>
<p class="mobile_n">Коллекции на вкладке "Вставка" содержат элементы, которые определяют общий вид документа. Эти коллекции служат для вставки в документ таблиц, колонтитулов, списков, титульных страниц и других стандартных блоков. При создании рисунков, диаграмм или схем они согласовываются с видом текущего документа. Формат выделенного текста можно легко изменить, выбрав нужный вид из коллекции экспресс-стилей на вкладке "Главная". Текст можно также отформатировать с помощью других элементов управления на вкладке "Главная".</p>
<h2>Документ</h2>
<p>Чтобы придать документу профессиональный вид, воспользуйтесь доступными в Word макетами верхних и нижних колонтитулов, титульной страницы и текстовых полей, которые дополняют друг друга. Например, вы можете добавить подходящую титульную страницу, верхний колонтитул и боковое примечание. Откройте вкладку "Вставка" и выберите нужные элементы из различных коллекций.</p>
<h2>Темы</h2>
<p>Темы и стили также помогают придать документу единообразный вид. Если на вкладке "Конструктор" выбрать другую тему, то изображения, диаграммы и графические элементы SmartArt изменятся соответствующим образом. При применении стилей заголовки изменяются в соответствии с новой темой.</p>
</div>
</body>
</html>
Вот CSS :
/* другие медиа запросы */
@media (min-width:1200px){
body{
margin:0px;
padding:0px;
}
.header{
margin-bottom:30px;
display:inline;
}
hr{
DISplay:none;
}
.head1{
top:0px;
width:20%-10PX;
height:auto;
margin-left:0px;
float:left;
}
.head1>.FirstLogo{
color:silver;
font-family: 'Indie Flower', cursive;
font-size:2.4em ;
text-align:center;
padding:3px 50px;
}
.meny{
top:0px;
margin-top:0px;
margin-right:0px;
height:auto;
width:40%;
float:right;
}
.meny li{
font-size:1.5em;
color:silver;
display:inline;
margin-left:5% !important;
padding:2px 5px;
border:5px inset red;
background-color: #8B0000;
text-shadow: 1px 1px 2px black, 0 0 1em red;
}
text-decoration:none;
color: inherit;
}
.content{
margin-top:30%;
font-size:0.8em;
width:80%;
color:silver;
margin-top:50px;
margin-left:10%;
font-family: 'Indie Flower', cursive;
font-family: 'Lobster', cursive;
}
p{
text-indent: 1.5em;
font-family: 'Indie Flower', cursive;
font-family: 'Lobster', cursive;
}
h2{
font-size:4em;
margin-bottom:5%;
margin-top:10%;
}
.photo{
margin-right:25%;
margin-left:25%;
height:50%;
width:50%;
}
.mobile_n{
display:list-item;
margin-left:10%;}
}
Помогите решить проблему.
Заранее Спасибо!
