My goal is to have the header span from one side of the screen to the other and stop exactly at the edges, but it currently extends beyond and goes off the screen. I was under the impression that setting a specific width would make it start from one edge of the screen and end at the other edge.
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>