Problem with selecting div inside a boostrap container

See more:

CSS

I just want to show how the whole page that I am talking about looks like. I do not think it is necessary but maybe helps just in case. So this web page I am working on has 2 Boostrap div<code>s, one is <code>col-sm-4 and the other is col-sm-8 covering the whole page by both of these Divs. I want to put a div inside col-sm-8 and give it some styling like width and height and background etc. but when I was doing it by inserting "style" in div tag inside HTML, then it only works for desktop (laptop) but not for mobile screen. Can you tell me how should I select this Div inside main col-sm-8 div for mobile device?

Here is the code for col-sm-8 div and the Div inside it. Also, I added an id for this div that I used for another purpose to change the size of div but I do not think it can help either. It worked for resizing the div itself but not for nested div inside this div. I really need to understand how selectors and choosing insider elements including div or P tag or other elements work in general (not just this project) and it is harder for me to understand how selectors work when web page has more elements nested (for easier page with few elements, I understand it but for bigger projects, it is difficult. Maybe this question can clarify it. Here is the code:

<div class="col-sm-8" id="rightdiv " >
  <div  style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>
<p  style="text-align:center">myemail@gmail .com</p>
  </div>
</div>

As I said, this is a div side by side next to another div like this:

<div>
  <div class="row ">
    <div class="col-sm-4  " id="leftdiv"  > 
       <div id="main">
     
      <span style="font-size:40px;cursor:pointer ; 
      font-weight: bold ; " onclick="openNav()">☰ OPEN</span>
    </div>
  </div>

I do not think that is necessary but just in case I can help, here is the entire divs code the col-sm-4 and col-sm-8:

<div>
  <div class="row ">
    <div class="col-sm-4  " id="leftdiv"  > 
       <div id="main">
     
      <span style="font-size:40px;cursor:pointer ; font-weight: bold ; " onclick="openNav()">☰ open</span>
    </div>
  </div>

<div class="col-sm-8" id="rightdiv " >
  <div  style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>

<p  style="text-align:center">myemail@gmail.com</p>
                    
  </div>
</div>

</div>
</div>

My main problem is selecting a div inside this col-sm-8 for mobile device and change the div width and height and properties of it:
For this code:

<div class="col-sm-8" id="rightdiv " >
  <div  style="width: 800px; height: 600px ; background-color: lightblue;">
<p style="text-align:center">contact us </p>
   
<p  style="text-align:center">myemail@gmail .com</p>
                          
  </div>
</div>

Thank you!

What I have tried:

I tried to insert a class name for inside div in col-sm-8 and select it by that class and also without any class name by simply selecting "div" inside col-sm-8. I put both versions here.

I have also tried to use bootstrap media query and none bootstrap:

@media (min-width: 680px)

and:

@media only screen and (max-width : 680px)

Also, I played with max-width and min-width inside the media queries, but it did not work.

@media (min-width: 680px) { 
    .col-sm-8.div{
        width:  100px;
    }
}

@media only screen and (max-width : 680px) {
    .col-sm-8.innerdiv{
        width:  100px;
    }
}