CODEWITHSUNDEEP
htmlcsswebfrontend
John
John

Reputation: 23

When the screen resolution decreases, the header moves out, even though I have width: 100%;

Please help! When the screen resolution decreases, the header moves out, even though I have width: 100%; I was looking for answers and didn't find it anywhere!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  width: 100%;
  background-color: darkblue;
}
<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Upvotes: 1

Views: 86

Answers (2)

Cuong Vu
Cuong Vu

Reputation: 3723

Depends on your expected behavior, you can do either of the two options below

Set word-break for the header to break words into a new line and preserve max-width.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  word-break: break-all;
  width: 100%;
  background-color: darkblue;
}
<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Or use overflow to hide/show scrollbar for the overflowed text

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  overflow: hidden;
  width: 100%;
  background-color: darkblue;
}
<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Upvotes: 1

James
James

Reputation: 2787

There is nothing wrong with the width:100%, you just made overflow by setting the child element width to greater than the parent element.

A possible solution, use overflow:hidden or overflow:scroll (determined by which effect you want)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  width: 100%;
  background-color: darkblue;
  overflow:scroll;
}
<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhhjhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>
Or use overflow-wrap: break-word to let overflowed content automactially go to next line

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;

}

header {
   overflow-wrap: break-word;;
  width: 100%;
  background-color: darkblue;
}
<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Upvotes: 1

Related Questions