I can't seem to be able to get my page to display fully (it simply stays on top). I tried doing .html{margin +height} or doing just .body{margin height}, as well as combining them, or adding flex box to the CSS class and nothing seems to work. It looks like this:
.body,
.html {
margin: 0%;
height: 100%;
}
#nav {
display: flex;
justify-content: flex-end;
margin: top 15px;
}
a {
margin-right: 20px;
}
#nav.topimage {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
#nav.toplink {
width: 20px;
height: 20px;
}
#middle {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#logo {
text-align: center;
margin: top 300px;
}
#searchbarcontainer {
margin-top: 20px;
text-align: center;
}
#searchbar {
padding-top: 20px;
padding-bottom: 20px;
outline: 0;
width: 500px;
border-radius: 10px;
border: 2px solid chocolate;
}
#buttons {
margin-top: 30 pixels;
display: flex;
justify-content: center;
}
.button {
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
background: rgb(224, 224, 224);
border-radius: 3px;
}
#links {
text-align: center;
}
.body {
display: flex;
flex-direction: column-gap;
}
#footer-content {
background: rgb(221, 27, 27);
border-top: 1px solid blanchedalmond;
}<!DOCTYPE html>
<html>
<head>
<title>google clone</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
</div>
<div id="middle">
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
Google Search
</div>
<div class="button">
I am feeling lucky
</div>
</div>
<div id="links">
Google is offered in <a href="">X</a>
</div>
</div>
<div id="footer">
<div id="footer-content">
</div>
<a>xxx</a>
</div>
</div>
</body>
</html>Nothing seems to work and I don't know if it has something to do with flex or my html.