My header and the div below the header do not hug the sides of the webpage like I want them to. Despite me setting margin to 0, there is still a 10px margin. How do i fix this.
I have tried setting body margin to 0 as well
header position is absolute and left right top values are 0
#header{
display: grid;
position: absolute;
top:0;
left:0;
right:0;
height:90px;
background-color: #00719e;
text-align: center;
grid-template-columns: 13% 13% 13% 22% 13% 13% 13%;
min-width: 1570px;
margin: 0px;
}
#searchBox{
margin-top: 90px;
height: 50px;
background-color: aliceblue;
margin-left: 0%;
margin-right: 0%;
}
#cardsContainer{
margin-left: 60px;
margin-right: 60px;
display: grid;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
}
.headerButton{width:200px; height:50px; justify-self: center; align-self: center;}
#searchInput{ width:1810px; height:45px; margin: 0%;}
#searchButton{height:50px; border-radius: 50%;}
#header{margin-right: 10px; margin-left: 10px; font-size: xx-large;}<!DOCTYPE html>
<html>
<head>
<title>News</title>
<link rel="stylesheet" href="news.css">
</head>
<body style="background-color: aliceblue; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; color: #010022; ">
<div id="header">
<button id="sportButt" class="headerButton">Sports</button>
<button id="entertainmentButt" class="headerButton">Entertainment</button>
<button id="healthButt" class="headerButton">Health</button>
<div id="logoCont" class="headerButton"></div>
<button id="scienceButt" class="headerButton">Science</button>
<button id="technologyButt" class="headerButton">Technology</button>
<button id="economicsButt" class="headerButton">Economics</button>
</div>
<div id="searchBox">
<input id="searchInput"/>
<button id="searchButt">Search</button>
</div>
<div id="cardsContainer">
</div>
</body>
</html>My header and the div below the header do not hug the sides of the webpage like I want them to. Despite me setting margin to 0, there is still a 10px margin. How do i fix this.
I have tried setting body margin to 0 as well
header position is absolute and left right top values are 0
#header{
display: grid;
position: absolute;
top:0;
left:0;
right:0;
height:90px;
background-color: #00719e;
text-align: center;
grid-template-columns: 13% 13% 13% 22% 13% 13% 13%;
min-width: 1570px;
margin: 0px;
}
#searchBox{
margin-top: 90px;
height: 50px;
background-color: aliceblue;
margin-left: 0%;
margin-right: 0%;
}
#cardsContainer{
margin-left: 60px;
margin-right: 60px;
display: grid;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
}
.headerButton{width:200px; height:50px; justify-self: center; align-self: center;}
#searchInput{ width:1810px; height:45px; margin: 0%;}
#searchButton{height:50px; border-radius: 50%;}
#header{margin-right: 10px; margin-left: 10px; font-size: xx-large;}<!DOCTYPE html>
<html>
<head>
<title>News</title>
<link rel="stylesheet" href="news.css">
</head>
<body style="background-color: aliceblue; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; color: #010022; ">
<div id="header">
<button id="sportButt" class="headerButton">Sports</button>
<button id="entertainmentButt" class="headerButton">Entertainment</button>
<button id="healthButt" class="headerButton">Health</button>
<div id="logoCont" class="headerButton"></div>
<button id="scienceButt" class="headerButton">Science</button>
<button id="technologyButt" class="headerButton">Technology</button>
<button id="economicsButt" class="headerButton">Economics</button>
</div>
<div id="searchBox">
<input id="searchInput"/>
<button id="searchButt">Search</button>
</div>
<div id="cardsContainer">
</div>
</body>
</html>
body { margin: 0; }. – Ori Drori Commented Mar 4 at 9:32