VUE/HTML – Why is the app div not filling the whole width?

Issue

Just created my first view project and having trouble setting the width of #app to max width of screen. Are HTML objects not supposed to inherit their parents w/h?

I’ve tried setting width to 100vw and other solutions suggested on google/stackoverflow.

The index.html only consists of a body with a div with id="app".

Inspect element

<style>

@font-face {
    font-family: "Gotham";
    src: local("Gotham Medium"),
    url(./fonts/gotham/GothamRoundedMedium_21022.ttf) format("truetype");

    font-family: "Gotham";
    src: local("Gotham Bold"),
    url(./fonts/gotham/GothamRoundedBold_21016.ttf) format("truetype");

    
}

body {
  max-width: 1980px;
}

#app {
  font-family: Gotham,Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  max-width: inherit;
  color: #2c3e50;
}

</style>```

Solution

Try checking margins and paddings. By default, it is not 0. Setting the margin and padding is not the best option, but here it should help.

*,*::before,*:;after{
margin: 0;
padding:0;
}

Answered By – PaloDev

Answer Checked By – Jay B. (AngularFixing Admin)