Friends

Is there a tutorial on how to use grids in css?

Is there anything obvious with this code? In particular the margin-bottom ? No matter what I set it too the circle I'm making isn't moving

Actually lets edit this cause tbh the entire code is now not working. Mostly

1. The circle at the bottom
2. The hidden divs - when I click to go to the about link the divs move randomly

The code is below and the live preview of it so far is here

<div style="width:350px;margin:0 auto;border-radius:25px;-moz-border-radius:25px;overflow:hidden;background:#000;height:590px;"> <div style="width:300px;margin: 0 auto;background:#fff;overflow:hidden;height:500px;"> <div style="margin: 0 auto;"><font size="+3"><center>CHARACTER NAME</font> <font size="3">by AUTHOR</font></center></div> <div style="padding:5px;"><font size="5">INDEX <a href="#one">1. About</a> <a href="#two">2. Personality</a> <a href="#three">3. History</a> <a href="#four">4. The Author</a></div> </div> <div style="width:300px;margin: 0 auto;background:#fff;overflow-y: scroll;height:500px;padding:5px;"><font size="5"><a name="one">1. About</a></font> <b>Name:</b> <b>Age:</b> <b>Date of Birth:</b> <b>Gender:</b> <b>Pronouns</b> <b>Parents:</b> <b>Siblings</b> </div> <div style="width:300px;margin: 0 auto;background:#fff;overflow-y: scroll;height:500px;"><font size="5"><a name="two">2. Personality</a></font> </div> <div style="width:300px;margin: 0 auto;background:#fff;overflow-y: scroll;height:500px;"><a name="three"><font size="5">3. History</font></a> </div> <div style="width:300px;margin: 0 auto;background:#fff;overflow-y: scroll;height:500px;"><a name="four"><font size="5">4.The Author</font></a> <b>Name:</b> <b>Pronouns:</b> <b>Email:</b> <b>Discord:</b> <b>CDJ:</b> </div> <div style="margin-bottom:-10px;margin-left:50%;border-radius:50%;-moz-border-radius:50%;background:#999;width:30px;height:30px;"> </div> </div>