-1

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.

casraf
  • 21,085
  • 9
  • 56
  • 91
jkimishere
  • 127
  • 1
  • 7

1 Answers1

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!

Khubaib Tariq
  • 103
  • 6