Data on the xAxis is not Aligned properly

Hey campers!
I am struggling to build my first bar chart challenge from data visualization. The problem I am facing right now is bars not aligned properly on the xAxis. I am not good in d3.js and I can’t figure out how to solve this problem. Please can anyone help me out.
Here is the link to my project.
Bar Chart I know it doesn’t look I will add the styling later but for now the bars should be aligned properly with the xAxis.

You need to use the date data for the x positioning of each bar instead of just using the index (i) times the width divided by the number of bars. You’ll also probably need to parse the time data so you can properly use and align the years on the x-axis. Look up d3.utcParse() as an option for that. Good Luck!