Заголовок продолжает расширяться за пределами окна браузера

В моем новом портфолио веб-сайта должен быть заголовок с моим именем, главной навигацией и социальным меню. Таким образом, я сделал заголовок с тремя div, каждый с шириной 33%. Моя проблема в том, что, как только я ставлю позицию: исправлено там, заголовок продолжает расширяться. Это только тот случай, когда я применил некоторые дополнения или поля, так что это может вызвать у меня проблему, но я понятия не имею, как исправить эту проблему, которая сводит меня с ума в течение нескольких часов. Возможно, некоторые из вас могут помочь? По достоинству оцените!Заголовок продолжает расширяться за пределами окна браузера

<!DOCTYPE html> 
<html lang="en" class="no-js"> 

<body> 
    <div class="container"> 
     <div class="header"> 

      <div class="site-title"> 
       Hello World 
      </div> 

      <div class="main-menu"> 
      <ul class="main-menu"> 
       <a href="work.html"><li>Work</li></a> 
       <a href=""><li>Curriculum</li></a> 
       <a href="contact.html"><li>Contact</li></a> 
      </ul> 
      </div> 

      <div class="social-menu"> 
      <ul class="social-menu"> 
       <a href="#"><li class="fa fa-envelope"></li></a> 
       <a href="#"><li class="fa fa-twitter"></li></a> 
       <a href="#"><li class="fa fa-dribbble"></li></a> 
       <a href="#"><li class="fa fa-youtube-play"></li></a> 
       <a href="#"><li class="fa fa-500px"></li></a> 
      </ul> 
      </div> 

     </div> 

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

    </div> 

</body> 
</html> 

*{ 
    margin: 0em; 
    padding: 0em; 
    border: 0em; 
    text-decoration: none; 
    list-style: none; 
    color: #333; 
} 

html{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

body{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

container{ 
    margin: 3em; 
    overflow: auto; 
} 

.content{ 
    height: 2000px; 
} 

.container:before, 
.container:after { 
    content : ""; 
    display : table; 
} 
.container:after { 
    clear : both; 
} 

.header{ 
    width: 100%; 
    position: fixed; 
    z-index: 100; 
    margin: 3em; 
    background-color: burlywood; 
} 

.site-title{ 
    float:left; 
    display: inline-block; 
    width: calc(100%/3); 
    position: relative; 
    background-color: beige; 
} 

div.main-menu{ 
    margin:0 auto; 
    display: inline-block; 
    width: calc(100%/3); 
    text-align: center; 
    background-color: cadetblue; 
} 

.main-menu a{ 
    display: inline-block; 
} 

div.social-menu{ 
    float: right; 
    width: calc(100%/3); 
    display: inline-block; 
    text-align: right; 
}

источник

2016-11-27 nafets97

Flexbox не дает ответа на вопрос, правильно (это проблема маржи). –

Вам необходимо удалить поле с .header, но я также удалил его из .container, чтобы быть последовательным. Добавляемая вами маржа Эми переопределит ширину вашего контейнера, даже если у вас есть рамка с рамкой, а заполнение не будет.

*{ 
 
    margin: 0em; 
 
    padding: 0em; 
 
    border: 0em; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    color: #333; 
 
} 
 

 
html{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.container{ 
 
    /* margin: 3em; */ 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.content{ 
 
    height: 2000px; 
 
} 
 

 
.container:before, 
 
.container:after { 
 
    content : ""; 
 
    display : table; 
 
} 
 
.container:after { 
 
    clear : both; 
 
} 
 

 
.header{ 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 100; 
 
    /*margin: 3em;*/ 
 
    background-color: burlywood; 
 
} 
 

 
.site-title{ 
 
    float:left; 
 
    display: inline-block; 
 
    width: calc(100%/3); 
 
    position: relative; 
 
    background-color: beige; 
 
} 
 

 
div.main-menu{ 
 
    margin:0 auto; 
 
    display: inline-block; 
 
    width: calc(100%/3); 
 
    text-align: center; 
 
    background-color: cadetblue; 
 
} 
 

 
.main-menu a{ 
 
    display: inline-block; 
 
} 
 

 
div.social-menu{ 
 
    float: right; 
 
    width: calc(100%/3); 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<!DOCTYPE html> 
 
<html lang="en" class="no-js"> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="header"> 
 

 
      <div class="site-title"> 
 
       Hello World 
 
      </div> 
 

 
      <div class="main-menu"> 
 
      <ul class="main-menu"> 
 
       <a href="work.html"><li>Work</li></a> 
 
       <a href=""><li>Curriculum</li></a> 
 
       <a href="contact.html"><li>Contact</li></a> 
 
      </ul> 
 
      </div> 
 

 
      <div class="social-menu"> 
 
      <ul class="social-menu"> 
 
       <a href="#"><li class="fa fa-envelope"></li></a> 
 
       <a href="#"><li class="fa fa-twitter"></li></a> 
 
       <a href="#"><li class="fa fa-dribbble"></li></a> 
 
       <a href="#"><li class="fa fa-youtube-play"></li></a> 
 
       <a href="#"><li class="fa fa-500px"></li></a> 
 
      </ul> 
 
      </div> 
 

 
     </div> 
 

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

 
    </div> 
 

 
</body> 
 
</html>

источник

2016-11-27 18:06:35

Прежде всего спасибо за ваш ответ, я попробовал это сейчас, удалив поля, как вы предлагали, он работает с добавлением отступов в заголовок (думаю, я уже пробовал это, но неважно). При добавлении отступов ко всему контейнеру заголовок все еще не ведет себя правильно, не совсем уверен, почему. – nafets97

Либо добавьте дополнение к всему контейнеру или отдельным внутри него, но не к обоим. Консистенция здесь ключевая. У вас есть URL-адрес того, что вы пытались показать? –

Заголовок продолжает расширяться за пределами окна браузера

ответ

Смежные вопросы