I am currently learning HTML and CSS, and as a practice project, I am working on building a portfolio webpage. In the image provided, there are two containers, and I am facing an issue with the space on the sides when changing the background color. Despite trying different adjustments to padding and margin, I have been unsuccessful in solving the problem.
Does anyone have any suggestions on how to fix this issue?
https://i.stack.imgur.com/SfKOI.png
html,
body {
font-family: ;
margin: 0 auto;
text-transform: lowercase;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 !important;
}
.nav {
float: right;
display: inline;
margin: 0 auto;
list-style: none;
}
.nav li {
list-style: none;
display: inline;
padding-top: 0;
padding-left: 10px;
}
.nav>li>a {
padding: 0px !important;
color: black;
}
a:hover {
background-color: yellow;
}
.header {
width: 100%;
display: inline-block;
padding: 10px 0 0 0;
margin: 0 auto;
}
.header h1 {
font-size: 20px;
margin: 0 auto;
display: inline-block;
}
.header .nav {
padding-left: 10px;
}
.supporting h1 {
border-left: 1px solid black;
padding: 10px;
margin: 0 auto;
display: inline-block;
position: absolute;
top: 25%;
}
.supporting .container {
background-color: white;
height: 500px;
width: 100%;
}
.work .container {
height: 500px;
margin: 0 auto;
background: rgba(225, 225, 225, .8)
}<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="logo">header</h1>
<ul class="nav nav-pills">
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Photography</a>
</li>
<li>
<a href="#">blog</a>
</li>
</ul>
</div>
<div class="supporting">
<div class="container">
<h1>hi.</h1>
</div>
</div>
<div class="work">
<div class="container">
<h1>work</h1>
</div>
</div>