Your code has a few issues that need to be addressed in order to improve its functionality and readability:
Firstly, avoid styling inline unless absolutely necessary. It's best to use classes, ids, or generic selectors to separate HTML and CSS for easier maintenance.
Make sure all tags are properly opened and closed to prevent any rendering problems. Also, if you want to position an element using the absolute property, remember to specify the positioning attributes like right to achieve the desired effect.
In case you choose to style inline, ensure that the style information is included within the style attribute to avoid potential coding errors.
Feel free to reach out if you require further assistance or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>