Making HTML mobile compliant

Question

I am using CSS stylesheet offered by W3Schools.com for designing my front end and it has a class property by the name "w3-rightbar" which provides right border with thick line. I want this "w3-rightbar" to be hidden on the mobile view. So I used the below CSS script to achieve that,

<style>
@media only screen and (max-width: 480px) {
  .w3-rightbar { display: none; }
}
</style>

<div class="w3-quarter w3-container w3-rightbar w3-border-white w3-mobile" style="width: 25%;height: 300px;text-align: justify;" >
      <h3><b>Div 1 </b></h3>
      <p>
       Div 1 content
      </p> 
    </div>
    <div class="w3-quarter w3-container w3-mobile" style="width: 25%;text-align: justify;">
      <h3><b>Div 2</b></h3>
      <p>
       DIV 2 content
      </p>
    </div>

But what's happening is, it's setting the entire content of the Div 1 along with the right bar to none. I only want the right bar to be set to 'none'.

Answer 1

<style>
@media only screen and (max-width: 480px) {
    .w3-rightbar { border: none; }
}
</style>

rightbar sets a border property, so this should get rid of it on mobile