Kevin Powell - Community•4w ago

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?

2 Replies

MarkBoots•4w 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•4w ago

Have you got it fixed?

Gaming

Programming

Navbar Overflowing with the padding