I recently started work on a blog-like React application and implemented the Bootstrap grid system. However, I have noticed a significant gap between my two columns. Is there a way to remove this extra spacing? Attached is a screenshot for reference.
import React from 'react';
import ReactDom from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import faker from 'faker';
// Creating a new component
const App = () => {
const myCustomStyle = {color:'green', fontSize:'50px'};
return (
<div className="container">
<div className="row">
<div class="col-3">
<a href="/" className="avatar"><img alt="avatar" src={faker.image.avatar()}></img></a>
</div>
<div class="col-9" >
<p><b> Alex</b><span> Today at 5.00pm</span></p>
<p> Great blog post!</p>
</div>
</div>
</div>
)
}
ReactDom.render(<App />, document.querySelector('#root'))