0

I have body set to width 100%, height 100% but when I add a header with 100% width and margin-left and margin-right the header is taking 100% width plus margin-left and margin-right value but I want to have margin-left and margin-right value included within 100% of the width of header without causing horizontal scrolling to the body how do I do it?

here is code :

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

html,
body {
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 70px;
  margin-left: 30px;
  margin-right: 30px;
  border: 1px solid red;
}
<header></header>

Basically is this problem of box-sizing?? I'm using the next.js react framework. I want the total value of width calculated for a header that is 100% to include margin-left and margin-right value such that the header is in middle with margin-left and margin-right and not causing a horizontal scrollbar

J0R1AN
  • 583
  • 7
  • 10
sriram hegde
  • 2,301
  • 5
  • 29
  • 43
  • remove all the width:100% they are useless, you don't need them for block element – Temani Afif Aug 02 '20 at 12:11
  • Why would you want to have the margin-left and -right in the first place? Do you want to have the header smaller than the total width and have the margin on the right and left cut off the header? If so, just do as @Temani Afif said and remove the `width: 100%` line on the
    and that should give the wanted result
     – J0R1AN Aug 02 '20 at 12:13
  • yes that's what I want – sriram hegde Aug 02 '20 at 12:15

1 Answers1

-1

Add this to your CSS, it should solve your problem.

html, body, *{
   box-sizing: border-box;
}

Edit:

If this doesn't help use

max-width: 100%;

worked for me. codepen: https://codepen.io/justsomexanda/pen/BajXeyj

Fabian Wagner - a6a2f5842
  • 765
  • 7
  • 12