KPC
Kevin Powell - Community•3mo ago
Phae

Navbar Overflowing with the padding

Guys, I need some help with my CSS code. I'm new ro CSS and have been trying to develop a website for a client. At first, as a designer, my job was to get it done in figma, but he decided to have me build it and learn html/css in the proccess. I'm now doing the navbar, here is the code: 
.navbar{
  background-color: var(--mid-grey);
  border-bottom: 2px solid var(--light-grey);
  display: flex;
  padding: 8px 10%;
  position: fixed;
  gap:0.5rem;
  z-index: 10000000;
  box-shadow: 0px 3px 6px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.navbar{
  background-color: var(--mid-grey);
  border-bottom: 2px solid var(--light-grey);
  display: flex;
  padding: 8px 10%;
  position: fixed;
  gap:0.5rem;
  z-index: 10000000;
  box-shadow: 0px 3px 6px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
The problem I'm having is that inputing the lateral paddings is making the bar overflow to the right. What am I doing wrong?
No description
2 Replies
MarkBoots
MarkBoots•3mo ago
by default, when you set a size to an element, it's done to the content-box of the element (not including padding or border), So if you include padding to the 100% width, it will make it wider than the screen. to prevent that, you can set: "box-sizing: border-box" a common thing to do is to reset this for every element on the page, so you don't have to worry about it anymore 
* { box-sizing: border-box }
* { box-sizing: border-box }
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
MDN Web Docs
box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.
Victor Etaduovie
Victor Etaduovie•3mo ago
Have you got it fixed?

Did you find this page helpful?