How to make navbar full width?

Question

I want to make navbar full width of the screen but for some reason, it's full width only on the right side.

Left side of the navbar is not full width. Can someone please tell me how can I do it?

CSS code looks like that:

.head{
    background-color:rgb(48, 87, 56);
    box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
    margin-top: -2%;
    position: fixed;
    width:100%;
    
}

score 2 · Answer 1 · answered Mar 06 '22 at 07:10

2

I'm not sure, I should see your code, but try it : reset your body

 *{
   margin:0px;
   padding:0px;
 }

answered Mar 06 '22 at 07:10

Arezou Saremian

508
3
8

I added CSS code, can you check now please? – Chrisss Mar 06 '22 at 07:17
@Chrisss There is also need to add your html. – Arezou Saremian Mar 06 '22 at 07:20

score 2 · Answer 2 · edited Mar 06 '22 at 13:39

Maybe this can help:

* {
  margin:0;
  padding:0;
}

.navbar {
  padding: 6px 8px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  background-color:rgb(48, 87, 56);
  box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
  position: fixed;
  width:100%;
}

.logo {
  width:20px;
  height:20px;
}

<div class="navbar">
  <img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>

score 2 · Accepted Answer · answered Mar 06 '22 at 07:37

2

According to this MDN documentation, try to add

left: 0;

in your css file to close the gap on the left side.

answered Mar 06 '22 at 07:37

miftahulrespati

494
4
16

How to make navbar full width?

3 Answers3