0
<html>
    <head>
        <link rel="stylesheet" href="teste.css">
    </head>
    <body>
        <header>
            <div id="logo">logo</div>
            <div class="menu">
                <a href="#">option 1</a>
                <a href="#">option 2</a>
                <a href="#">option 3</a>
                <a href="#">option 4</a>
            </div>
            <div class="menu">
                <a href="#">option 5</a>
            </div>
        </header>
    </body>
</html>

css:

@font-face{
    font-family: MuseoModerno;
    src: url(fonts/MuseoModerno-VariableFont_wght.ttf);
}

body{
    font-family: MuseoModerno;
    font-size: 12pt;
    margin: 0px;
    width: 100%;
    background-color: orangered;

}
header{
    padding: 1rem;
    background-color: orchid;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: space-between;
}

why this code creates a scroll bar?The width property in 100% shouldn't force the header to fit the flex content in the window width? What css is understanding in this code. How can i fix it?

1 Answers1

2

Add this to your code:

* {box-sizing: border-box;}
srWebDev
  • 374
  • 1
  • 7
  • 17