100% width isn't wide enough to fill the screen

Question

style.css(only part of code)

header {
    margin-top : 0;
    margin-left:0;
    min-width: 15vw;
    z-index: 50;
    width: 100%;
    height: 5vw;
    font-family: 'Indie Flower', cursive;
    color: wheat;
    text-align: center;
    font-size: 2vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

index.html(only part of code.)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel = "stylesheet" href = "style.css">
    <script defer src = "app.js"></script>
    <title>Document</title>
</head>

<body>
    <header style="background-color:#463830; ">
        hello
    </header>
</body>

in mobile devices, the header's width isn't wide enough to fill the whole screen. Any ideas why? I tried different solutions from different stack overflow questions.

Cervus camelopardalis · Answer 1 · 2022-06-01T14:11:31.543

0

Here you go... Most browsers will display the <body> element with the following default values (source):

body {
  display: block;
  margin: 8px;
}

body:focus {
  outline: none;
}

You need to override the default margin value by adding this to your CSS:

html,
body {
  margin: 0;
}

See the snippet below.

html,
body {
  margin: 0;
}

header {
  margin-top: 0;
  margin-left: 0;
  min-width: 15vw;
  z-index: 50;
  width: 100%;
  height: 5vw;
  font-family: 'Indie Flower', cursive;
  color: wheat;
  text-align: center;
  font-size: 2vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
  <title>Document</title>
</head>

<body>
  <header style="background-color:#463830; ">
    hello
  </header>
</body>

edited Jun 01 '22 at 14:11

answered Jun 01 '22 at 13:18

Cervus camelopardalis

2,947
1
5
16

default css styles? what do you mean? – jkimishere Jun 01 '22 at 13:25
Should I just reset all the properties? – jkimishere Jun 01 '22 at 13:35
@jkimishere Default browser css – kennarddh Jun 01 '22 at 13:35
@kennarddh how do I remove those?(sorry I am a total beginner.) – jkimishere Jun 01 '22 at 14:00
I updated my answer. See the snippet above. – Cervus camelopardalis Jun 01 '22 at 14:00
There is no default `padding` on `body`. – Kameron Jun 01 '22 at 14:02
Yeah, just 8px margin. You're right. – Cervus camelopardalis Jun 01 '22 at 14:02
uh...this just made the header the size of my text in it. Any ideas why? – jkimishere Jun 01 '22 at 14:11
You are using `vw` which is a relative unit. If you want the header to be the same size on all screens then you need to use `px`, for example. Change `header { height: 5vw; }` to `header { height: 100px; }`. See the snippet above in full-page mode. – Cervus camelopardalis Jun 01 '22 at 14:17
that didn't work..... still like before – jkimishere Jun 01 '22 at 14:28
What do you mean "like before"? What's the problem? – Cervus camelopardalis Jun 01 '22 at 14:30
Not wide enough and it isn't even on the top of the screen. – jkimishere Jun 01 '22 at 14:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245235/discussion-between-jkimishere-and-cervus-camelopardalis). – jkimishere Jun 01 '22 at 14:43

score 0 · Answer 2 · answered Jun 01 '22 at 14:23

0

Add

*{
   margin = 0;
   padding = 0;
   }

in your code and in the header section

header {

    min-width: 15vw;
    z-index: 50;
    max-width: 100vw;
    width: 100%;
    height: 5vw;
    font-family: 'Indie Flower', cursive;
    color: wheat;
    text-align: center;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

apply this code snippet, hope this works!

answered Jun 01 '22 at 14:23

Khubaib Tariq

71
5

It didn't. it is just like the start. Is my device wrong or something? – jkimishere Jun 01 '22 at 14:31

100% width isn't wide enough to fill the screen

2 Answers2