items keep going outside the container

I am designing this dashboard , but the ant item it put in it just jumps out of the container its supposed to be in, thanks

I am using bootstrap in this , so I tried setting the class to container-fluid , as it should fill the content , and I tried changing the tags from a <span> to <p> to a normal <div>, and also trying the display :block property in CSS , I just don't know what is wrong
Edit :
it seams that the margin property that is given for the span is making the problem , but why?

code :

<section class="container">
<div class="header">
<h3></h3>
</div>
<hr>
<div class="row">
<div class="col-8">
<div class="profPic">
<img src="ProfilePicture.png" alt="Profile Picture" class="img-fluid">
</div>
</div>
<div class="col-4 btns">
<button type="submit" class="btn btn-Danger">gg</button>
<button type="submit" class="btn btn-Danger">ff</button>
<button type="submit" class="btn btn-Danger">dd</button>
<button type="submit" class="btn btn-Danger">qq</button>
</div>
</div>
<hr>
<div class="row">
<span>               
</span>
<span>                 
</span>
<span>
</span>
<span>              
</span>
<span> 
</span>
<span>
الصف:
</span>
</div>     
</section>

css code:

body{
background-image: url('backgroundOne.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
}
section{
background-color: white;
border: solid 2px red;
box-shadow: 0 0 3px red,
0 0 7px red,
0 0 15px red,
0 0 25px red;
border-radius: 10px;
}
.header{
width: 100%;
border-top-left-radius: 7px;
border-top-right-radius:7px;
padding: 2px;
text-align: center;
color: red;
background-color:#525252 ;
}
.profPic{
margin-left: 4%;
width: 40%;
height: auto;
border-right: solid 2px #d3d3d3;
padding-right: 20px;
}
img{
width: 100%;
height: 100%;
}
p:hover{
color: red;
}
span{
display: block;
margin: 20px;
background-color: #525252;
color: #d3d3d3;
border-radius: 6px;
padding: 1%;
}
.btn{
margin: 15px;
float: center;
}
.btns{
max-width: 25%;
}
.vll{
border-left: solid;
}

this can be fixed by modifying your '.header' class. Since there is no content in your <h3> tag, there is no height being assigned to the parent <div>. If you remove the padding from you '.header' class you can see the div disappears because it was padding the size of the margin in the h3 styles. you can fix all of this by getting rid of the padding element in your '.header' class and setting the margin for h3 to 0. Then once you type something in your heading it will be the height of the text or you can set the height manually in the header class.

.header{
width: 100%;
border-top-left-radius: 7px;
border-top-right-radius:7px;
text-align: center;             /* remove padding from this class */
color: red;
background-color:#525252 ;
}
/* set margin to 0 in h3 */
h3 {
margin: 0
}

The problem is that the margin given to the span increases the length of the element to more than 100%, and part of the element is out of the frame. To fix the issue, first, remove "margin: 20px;" from the assigned CSS for the span selector. Then, put each of the spans in a div tag with the desired class (such as "span-container") like this:

<div class="span-container">
<span>               
</span>
</div>
<div class="span-container">
<span>               
</span>
</div>
<div class="span-container">
<span>               
</span>
</div>
<div class="span-container">
<span>               
</span>
</div>
</span>
<div class="span-container">
<span>
الصف:
</span>
</div>

Finally, add the following CSS code to your CSS styles:

.span-container { padding: 20px;}