Positing <div> elements when primary <div> is fixed position?
I'm working on a site where the navigation bar is within a fixed <div> element at the top of the page. So when scrolling happens, the navigation won't move. I noticed when I started coding subsequent <div> elements, they didn't position according to how I thought they would. For example, if I make each subsequent <div> width 70% and want them centered, I would do this: margin: 100px auto; however, the <div> is left justified ignoring the "auto". How do I get the <div> to be centered automatically? Below is the entire index.html page.
Code:
<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/icofont.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: aliceblue;
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #444;
}
body {
height: 100vh;
width: 100%;
}
h1 {
margin: 0 40px;
font-weight: 600;
font-family: Cabin;
letter-spacing: 0.03em;
}
h3 {
text-align: center;
margin-bottom: 35px;
letter-spacing: 0.06em;
}
hr {
width: 85%;
height: 4px;
margin: 0 auto;
background-color: #ccc;
}
ul {
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
li {
color: #333;
font-size: 18px;
margin: 19px 60px;
display: inline-block;
font-family: 'Roboto Condensed', 'Arial Narrow';
}
#authorName {
float: left;
margin: 10px 20px;
}
#header {
width: 100%;
height: 60px;
position: fixed;
background-color: beige;
border-bottom: 1px solid #aaa;
}
#socialmedia {
float: right;
display: none;
margin-top: -37px;
margin-right: 60px;
}
#bio {
width: 75%;
height: 300px;
padding: 200px 0;
font-size: 20px;
position: absolute;
margin-top: 800px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
letter-spacing: 0.04em;
border: 1px solid red;
box-shadow: 20px 20px 20px #ccc;
font-family: 'Arial Narrow', 'Roboto Condensed';
}
#bio p {
width: 85%;
height: 180px;
text-align: justify;
margin: 40px auto;
}
#socialmedia .icon {
color: #aaa;
margin-right: 15px;
}
#bookcover {
float: left;
height: 400px;
width: 75%;
margin: 200px auto;
border-radius: 20px;
border: 1px solid blue;
}
footer {
}
</style>
</head>
<body>
<div id="header">
<div id="authorName">
<a href="#header"><h1>JOHN DOE</h1></a>
</div>
<div>
<ul>
<a href=""><li>WORKS</li></a>
<a href="#bio"><li>BIO</li></a>
<a href=""><li>LINKS</li></a>
<a href=""><li>CONTACT</li></a>
</ul>
</div>
<div id="socialmedia">
<i class="icofont-facebook icon"></i>
<i class="icofont-twitter icon"></i>
<i class="icofont-instagram icon"></i>
</div>
</div>
<div id="bookcover">
<img src="">
</div>
<div id="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Thanks,
