D3 Bar Chart - Bars spills over x-axis scale line

The bars spills over the x-axis line. I don’t know why this is happening. I think its because of the padding that is causing this, but I’m not sure and I don’t know how the fix this. Also, if I get rid of padding, axes line would be cut out of the ‘svg’.

link: https://codepen.io/Ozubergs/pen/XoVxpQ?editors=0110

    .attr('x', (d) => xScale(new Date(d[0])))
    .attr('y', (d) => yScale(d[1]))
    .attr('width', width/dataset.length)
    **.attr('height', (d) => (height - padding) - yScale(d[1]))**
    .attr('fill', '#6bedff')
    .attr('class', 'bar')
    .attr('data-date', (d) => d[0])
    .attr('data-gdp', (d) => d[1]);
  var xAxis = d3.axisBottom(xScale);
  var yAxis = d3.axisLeft(yScale);
    .attr('id', 'x-axis')
    **.attr("transform", "translate(0, " + (height - padding) + ")")**

If you subtract the padding from the height in the xAxis transform, and in the height attribute for the svg it should line up


Thanks a lot. You helped greatly