My professor provided the class with an image that may resemble something he could ask us to recreate on an upcoming exam. He suggested we try replicating it at home to study. I have most of it figured out, but there are three links positioned perfectly across the top of the page that I can't seem to get right.
I've spent hours tweaking the numbers, trying different widths and margins, like setting the link width to 33% and margin to 1.66%. However, my attempts led to unexpected outcomes where one of the links ended up below the others in the browser. It's becoming more confusing than helpful. The perfection of his image suggests a mathematical solution rather than arbitrary number adjustments.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="practiceTest.css">
<title>Document</title>
</head>
<body>
<div id="box1">
<a href="https://www.google.com" id="googLink">Google</a>
<a href="https://www.microsoft.com" id="microLink">Microsoft</a>
<a href="https://www.yahoo.com" id="yahooLink">Yahoo</a>
</div>
<hr>
<div id="box2">
<h1 id="header">Guest Book</h1>
<form action="post">
First Name:
<input type="text" id="firstName">
Last Name:
<input type="text" id="lastName">
College:
<input type="checkbox" name="Business" id="business">
Business
<input type="checkbox" name="Education" id="education">
Education
<input type="checkbox" name="arts" id="arts">
<br>
Current Profession:
<select>
<option value="idk">unemployed</option>
<option value="idk1">idk1</option>
</select>
<br>
Comments:
<br>
<textarea name="comments" id="comments" cols="30" rows="2"></textarea>
Would you like to share your comments with others?
<br>
<input type="radio" name="yes" id="yes">
<input type="radio" name="no" id="no">
<hr>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>
</div>
<hr>
<div id="box3">
Copyright - Made up Name
</div>
</body>
</html>
CSS
#box1{
background-color: black;
align-self: center;
padding: 20px;
}
a{
align-content: center;
width: 20%;
margin: 0 5.33%;
padding: 10px 0;
color: azure;
background-color: red;
display: inline-block;
text-decoration-line: none;
color: white;
text-align: center;
}
body{
background-color: whitesmoke;
}
#box2{
padding: 20px 20px;
margin: auto 10px;
background-color: white;
color: darkred;
}
#box3{
color: white;
background-color: black;
padding: 20px;
text-align: center;
}