CSS Grid automatically adding a ::before element - html

Question

I am new to CSS in general and trying out a simple grid layout. This is what I have.
CSS
.layoutGrid {
display: grid;
grid-gap: 10px;
grid-auto-rows: minMax(100px, auto);
}
.articleCard {
display: grid;
grid-template-rows: 100px 300px 100px;
grid-template-areas: "article-title"
"article-body"
"article-footer";
grid-auto-flow: row dense;
}
.articleHeader {
grid-area: article-title;
}
.articleBody {
grid-area: article-body;
}
.articleFooter {
display: grid;
grid-template-columns: 0.5fr 0.5fr;
grid-template-areas: "articleDomain articleKeypoints";
grid-area: article-footer;
grid-auto-flow: row dense;
}
.articleKeypoints {
grid-area: article-keypoints;
}
.articleDomain {
grid-area: article-domain;
}
#media only screen and (min-width: 600px) {
.layoutGrid {
grid-template-columns: repeat(3, 1fr);
}
}
#media only screen and (max-width: 600px) {
.layoutGrid {
grid-template-columns: repeat(1, 1fr);
}
}
HTML
<div id="mainContent" className="container layoutGrid">
<Card className={"articleCard"} style={{height:"500px", flex: "1 1 auto", padding: "1.25rem", boxSizing: "border-box"}}>
<CardHeader className="articleHeader">
<CardTitle>{props.articleDetails.Title}</CardTitle>
</CardHeader>
<CardBody className="articleBody">
<CardText>{props.articleDetails.Summary}</CardText>
</CardBody>
<div className="row articleFooter">
<div className="col-auto mr-auto">
<Button outline color="info">Read Keypoints</Button>
</div>
<div className="col-auto">
<CardSubtitle style={{verticalAlign: 'text-bottom'}}>
<small>{props.articleDetails.Domain}</small>
</CardSubtitle>
</div>
</div>
</Card>
</div>
There is nothing here which adds a ::before element, but in the result the first element of the grid is always a ::before element. Even the inner grid which says "Read Keypoints" has the same issue. The outer layout is in a loop but I dont think that would affect anything.
Can anyone tell how do I get around this, and also any pointers on how to improve the overall structure of the layout would be really appreciated!

Answer 1

Writing my comment as an answer as it seems to do the trick.
That's bootstrap.css its .container selector that adds the before and
after. If you're using grid you should either not user the class
container here (some other name) or not use bootstrap.

Answer 2

There is nothing wrong with ::before or ::after. Those are CSS pseudo elements/selectors that inserts something before/after the content of each selected element(s).
Here they are shown because of viewing the code dynamically in Developers tool of the browser.
Just compare it with the real source of the page - right click on the page and select View page source (the message vary in web browsers). A blank tab will appear with exact code as it was send from the server to the web browser.