1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Избавиться от пробела перед горизонтальным меню

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем TreShk0, 3 янв 2018.

  1. TreShk0

    TreShk0

    Регистрация:
    3 янв 2018
    Сообщения:
    1
    Симпатии:
    0
    Появилась проблема и хотелось бы ее решить. У сайта перед горизонтальным меню и всем остальным появился пробел, который не убирается знакомыми мне способами. Прошу объяснить в чем моя ошибка и как это исправить(Если можно доступным для новичка языком)
    [​IMG]
    HTML:
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="1" />
      <meta name="description" content="Test site" />
      <title>1</title>
      <link rel="stylesheet" href="main.css" />
    </head>
    
    <body>
      <header>
        <div class="container">
          <nav>
            <ul class="menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
            </ul>
          </nav>
        </div>
      </header>
    
    
    </body>
    
    </html>
    
    Код:
    body{
      padding: 0;
      margin: 0;
    }
    
    nav{
      margin-top: 75px;
      background-color: #444;
      height: 40px;
      margin: 40px 0px;
    }
    .menu{
      padding: 0px;
      margin: 0px;
      float: left;
      position: relative;
      left: 50%;
      height: 40px;
      display: block;
    
    }
    .menu li{
      margin-right: 40px;
      display: block;
      float: left;
      position: relative;
      left: -50%;
      margin: 0 10px;
      height: 40px;
    }
    .menu a{
      display: block;
      color: #fff;
      padding: 0 15px;
      line-height: 40px;
      text-decoration: none;
    }
    .menu a:hover{
      background-color: #666;
    }
    header{
      background: url(background_ny.png) center top / cover;
      height: 600px;
      margin-top: -20px;
    }
     .container{
       margin: 0 auto;
     }
     
  2. destroer18

    destroer18

    Регистрация:
    8 янв 2018
    Сообщения:
    1
    Симпатии:
    0
    Предполагаю что вот тут:
    nav{
    margin-top: 75px; <-- вот тут убери
    background-color: #444;
    height: 40px;
    margin: 40px 0px;

    измени margin на 0 и посмотри что будет.