Is there a way to set the <div> width to 100% of the screen?

Question

I have a pure HTML /CSS webpage. I made a dropdown menu, but I cannot set it to full width.

Here is a codepen of it.

https://codepen.io/SynergyOfLife/pen/ExyZdZz

I am using Bootstrap 4.5.2.

My .header div does not fill 100% of the width no matter what I try. I want it to fill 100%, with the example text under it.

Help would be appreciated, Thanks.

Answer 1

The Reason why you were unable to get it resolved was because you were setting float:left for the <ui> element - which forces your ui container to the left restricting it to occupy the full width of the page.

Solved

I have corrected the CSS the way you desire

Proposed CSS

.header{
  width:100%;
}
.header .main-navigation ul:nth-child(1){
  display:flex;
  width:100%;
  justify-content:center;
  background-color: red;
}
.header .main-navigation ul li {
  padding: 20px 0;
  background-color: red;
}
.header .main-navigation ul li a {
  padding: 0 20px;
}

.header .main-navigation ul li ul {
  position: absolute;
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.header .main-navigation ul li:hover ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -10px);
}

.header .main-navigation ul li ul li {
  clear: left;
  padding-left: 10px;
  width: 180px;
}

Result

Also if you want the <li> elements ie the menu options to appear to the left then you can just change the justify-content to flex-start instead of center .

Do tell me wether you desired the same or not:)

Answer 2

Add the background color to the header instead of the li. Then remove float from the li and replace it with display inline-block. You can also use display flex on the ul.