How to leave DIV "Responsive"?

Question

I know almost nothing of the, diagmos, "Advanced" of the CSS!

So I wanted to know how to leave one div well Responsive for users MOBILE. So here’s the deal:

I’ve got divs with some footage, and some radios, for choice of details etc! These divs are of only one size, which is well adjusted to the screen of my notebook! But I want to make these divs are well adjusted with the panel page on all devices!

My code is like this:

.selecao-bordas {

left: 300px; 
top: 150px; 
width: 715px; 
height: 100px;
overflow: auto;

}

.selecao-details {

left: 300px; 
top: 150px; 
width: 715px; 
height: 200px;
overflow: auto;

}

<form>
    <br>
    Bordas
    <div class="selecao-bordas">
        <?php include("bordas.php"); ?>
    </div>
						
    <br>
    Detalhes
				
    <div class="selecao-details">
        <?php include("detalhes.php"); ?>
    </div>
								
    <br>
    Nível do Clã
				
    <?php include("clanlevel.php"); ?>
				
</form>

A print of how it looks on the page:

http://image.prntscr.com/image/74d4235e915a43e3af1a987e70da9e62.png

So it stays when the screen decreases:

http://image.prntscr.com/image/92a0c3d6dedd4b928f3c5011b938722f.png

Answer 1

I guess that settles it.

.selecao-bordas, .selecao-details {
    overflow: auto;
}
.content {
    display: inline-block;
}


<div class="container">
    <form>
        <br>
        Bordas
        <div class="selecao-bordas col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="content">
                <?php include("bordas.php"); ?>
            </div>
        </div>

        <br>
        Detalhes

        <div class="selecao-details col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="content">
                <?php include("detalhes.php"); ?>
            </div>
        </div>

        <br>
        Nível do Clã

        <?php include("clanlevel.php"); ?>

    </form>
</div>