CODEWITHSUNDEEP
htmlcss
Recht88
Recht88

Reputation: 153

Why does the right side of the header go of screen when width is set to 100% and left side doesnt even reach the edge of the screen?

I'm trying to have the header go from one side of the screen to the other and stop just like how the left side does, however it extends much pass and goes off the screen. Also I thought that when you set a specific width that meas that it starts from the edge o the screen and stops at the other edge of the screen. 

body{
    background-color: white;
    width: 100%;
}

header{
    width: 100%;
    background-color: #0000CD;

}

nav{
    display: flex;
    justify-content: center;


}

ul.main-menu{
    display: flex;
    width: 100%;
    justify-content: space-around;
    list-style: none;
}

li.menu-item{



}




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Why OneDrive?</title>
    <link rel="stylesheet" href="../CSS/styles.css">
    <script src="../JS/3picslideshow.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
    <header>
        <nav>
            <ul class="main-menu">
                <li class="menu-item">Home</li>
                <li class="menu-item">Usage</li>
                <li class="menu-item">About</li>
                <li class="menu-item">Acknowledgments</li>
            </ul> 
        </nav>
    </header>


</body>
</html>

Upvotes: 1

Views: 550

Answers (4)

Johannes
Johannes

Reputation: 67748

The body element has a margin by default. Remove that by adding

html, body {
  margin: 0;
}

.. and a 100% wide element will perfectly fit the width. Example:

body {
  margin: 0;
}

.x {
  width: 100%;
  background: #fa0;
}
<div class="x">The DIV with class "x"</div>

Upvotes: 1

JasonB
JasonB

Reputation: 6368

Remove the margin from the body.

Upvotes: 0

Nick0989
Nick0989

Reputation: 459

Remove the width: 100%; from the body class. You don't need it. That will fix your issue.

Upvotes: 3

Davide Giorgetta
Davide Giorgetta

Reputation: 65

Try removing width: 100% from your body tag. It seems to work.

Example here.

Upvotes: 0

Related Questions