Search code examples
cssflexboxmaterial-designappbar

Extra margin within 100% width flexbox

I'd like to make a appbar following the material design.

enter image description here

The code I write trying to use flexbox with 100% width to draw this.

.appbar {
  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  height: 48px;

  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46);
}

But I get a extra margin within my appbar. Why is it happened?

enter image description here

Solution

  • Add margin: 0; padding: 0; to body 

     body{
  margin: 0;
padding: 0;
 }
 .appbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: red;

  width: 100%;
  height: 48px;

  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46);
}
    <div class="appbar"></div>