Rows and columns of button won't fit mobile screen - html

Question

I am trying to make my buttons fit the mobile screen, but for some reason, it looks bad.
The background won't continue down. Can you point me where I was wrong?
The div of buttons is inside a form if it helps.
I am using rows, and then 3 col-md-4, I think its something my body or container problem. but could not find the problem.
Computer look :
Mobile look:
Html Code
<div id="studentclass" style="display: none">
<div class="row justify-content-center text-center">
<div class="col-md-4 classbutton">
<button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
</button>
</div>
<div class="col-md-4 classbutton">
<button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
</button>
</div>
<div class="col-md-4 classbutton">
<button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>
<div class="col-md-4 classbutton">
<button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
<div class="col-md-4 classbutton">
<button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
CSS
<style>
.row {
margin-right: 0px;
}
#media screen and (max-width: 650px) {
.classbuttonsize {
height: 75px;
width: 75px;
}
#studentclass .row {
width: 100%;
}
#studentclass .classbutton {
height: 75px;
width: 75px;
}
}
img {
width: 100%;
height: auto;
}
html,
body {
height: 100%;
font-family: 'Alef', sans-serif;
}
.container {
height: 100%;
position: relative;
display: flex;
}
.container > div {
margin: auto;
}
body {
background-image: url('{% static ' images/background.jpg ' %}');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.card-img-top {
width: 100%;
height: auto;
}
.classbutton {
padding: 15px 15px 15px 15px;
}
.classbuttonsize {
height: 110px;
width: 110px;
font-size: 50px;
background-color: #e7e7e7;
color: black;
border-radius: 8px;
border: 1px solid black;
}

Answer 1

change the structure if using bootstrap 4
.row {
margin-right: 0px;
}
.classbutton{
margin-bottom:10px;
}
#media screen and (max-width: 650px) {
.classbuttonsize {
height: 75px;
width: 75px;
}
#studentclass .row {
width: 100%;
}
#studentclass .classbutton {
height: 75px;
width: 75px;
}
}
img {
width: 100%;
height: auto;
}
html,
body {
height: 100%;
font-family: 'Alef', sans-serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="studentclass" style="display: block">
<div class="row justify-content-center text-center">
<div class="col-4 classbutton">
<button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
</button>
</div>
<div class="col-4 classbutton">
<button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
</button>
</div>
<div class="col-4 classbutton">
<button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>
<div class="col-4 classbutton">
<button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
<div class="col-4 classbutton">
<button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>

Answer 2

I have Fixed it:
just add to the div of col:
<div class="col-4 classbutton" style="width: 33%; height: 33%">

Answer 3

try this
<div class="col-sm-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>