When I apply margin to an html element moves the whole page downwards-CodePudding

I used margin on other elements successfully, yet when I try to do this with #searchbarcontainer it moves the entire page down. I'm trying to center it slightly below the middle of the page, but I can't work my way around this problem. I am trying to make somewhat of a Google clone and I'm new to HTML and CSS. Here is my code:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#nav {
  display: flex;
  justify-content: flex-end;
  margin-top: -40px;
  margin-right: -5px;
  padding: 20px;
}

.child {
  padding: 15px;
}

.link {
  color: rgb(95, 91, 91);
  text-decoration: none;
}

.link:hover {
  color: black;
}

#logo {
  margin-top: 110px;
  text-align: center;
}

#searchbarcontainer {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div id="form">
  <form action="https://google.com/search">
    <div id="searchbarcontainer">
      <input id="searchbar" type="text" name="q">
    </div>
    <div id="submitcontainer">
      <input id="submit" type="submit" value="Google Search">
    </div>
  </form>
</div>

<div id="nav">
  <div >
    <button type="button" ><a  href="images.html">Image Search</a></button>
  </div>
  <div >
    <button type="button" ><a  href="advanced.html">Advanced Search</a></button>
  </div>
</div>
<div id="logo">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

CodePudding user response：

Your layout doesnt allow for the search bar container to be moved without affecting the entire page. You say that you want it to be lower, but as you can see in the picture, it has no where to go except to move everything down.

If you wanted to move it down you have to change it so that the search input and the "google search" button will be in the same container and center it that way

CodePudding user response：

when writing html, you have to write what you want to see in vertical order in your website you've written from bottom to top instead

you've also made a lot of unnecessary elements

here's a somewhat streamlined version

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "sans-serif";
}

input {
  outline: 0;
  border: 0.3vh solid #bbb;
  font-size: 1.6vh;
}

nav {
  width: 100%;
  height: 6.7vh;
  border-bottom: 0.2vh solid #bbb;
  display: flex;
  justify-content: flex-end;
  padding: 0 3vh;
}

nav>div {
  height: 6.7vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav>div>a {
  color: black;
  text-decoration: none;
  font-size: 1.6vh;
  background: yellow;
}

nav>div>a:first-child {
  margin-right: 1vh;
}

section {
  height: 93.3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section>img {
  width: 45vw;
  height: 15vh;
  object-fit: contain;
}

section>form {
  width: 45vw;
  display: flex;
  justify-content: space-around;
  margin-top: 3vh;
}

section>form>input[type="text"] {
  padding: 1vh;
  border-radius: 1vh;
  width: 65%;
}

section>form>input[type="submit"] {
  width: 25%;
  border-radius: 1vh;
}

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

<head>
  <title>Search</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <nav>
      <div><a href="images.html">Image Search</a><a href="advaced.html">Advanced Search</a></div>
    </nav>
    <section>
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
      <form action="https://google.com/search">
        <input id="searchbar" type="text" name="q" />
        <input id="submit" type="submit" value="Search" />
      </form>
    </section>
  </main>
</body>

</html>