what can I do for delete space from sides of my page (when choose color for background) and dont hav-CodePudding

my HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon"
        href="//theme.zdassets.com/theme_assets/2197739/1a71d05024d0bf628f47cb2a498903409ad571f0.png" />
    <title>myAbstract</title>
</head>
<header >
    <a href="https://www.goabstract.com/">
        <img src="//theme.zdassets.com/theme_assets/2197739/df1f3a3595ad6f2e809942c0cbfa85f84156dd61.svg" alt="Logo"
            >
    </a>
    <span > | Help Center</span>
    <button >submit a request</button>
    <button >sign in</button>
</header>

<body>
    <div >
        <h1>How can we help?</h1>
        <input  type="search" placeholder="Search" aria-label="Search">
    </div>
    <div >
        <div>
            <h3>Using Abstract</h3>
            <p>Abstract lets you manage, version, and document your designs in one place.</p>
            <a href="https://help.abstract.com/hc/en-us/categories/360005436612-Using-Abstract"
                >Learn More →</a>
        </div>
        <div >
            <img src="1.png" alt="1st">
        </div>
    </div>
</body>

</html>

related part of my CSS code

.header {
  background-color: black;
  width: 100%;
  height: 88px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}

.search-body {
  background-color: #DADBF1;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

I tested some different methods but they didn't work. please check my image.

https://i.stack.imgur.com/OhAcu.png

I compare my code with some pages but can't find solution.

which one must I use ?

margin, overflow, width, position or another.

CodePudding user response：

You might want to use css reset :)

* {
   margin: 0;
   padding: 0;
}