CSS responsive inner DIV not resizing to outer DIV width

I'm trying to make my site responsive using media queries. The outer DIV changes width but the width of the inner node(s) don't seem to change.

Purple is the outer DIV.

Normal desktop size, Blue=DIV

Inner text not changing with responsive size change.

Smaller size, blue color=DIV

The outer DIV gets smaller but the content stays the same width.

Here's the code:

.main{
	margin: 0px;
	width:1200px;
	background-color:blue;
}

.auto-style3{
	margin:0px;
	background: rgba(204, 204, 204, 0.7);
}

@media only screen and (max-width: 799px){
	.main{
		width:100%;
	}
	.auto-style3{
		width:100%;
	}
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="text.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main">
    <div class="auto-style3" style="height: 100px; width: 1200px" >
        <h3 class="onama2"><b>O nama</b></h3>
        <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji.
Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b>
        </h4>
    </div>
</div>

</body>
</html>

Solution

You'll need to apply a max-width to the .auto-style3 element so that it doesn't exceed the width of it's parent element.

.auto-style3 {
  margin: 0px;
  background: rgba(204, 204, 204, 0.7);
}

.main {
  margin: 0px;
  width: 1200px;
  background-color: blue;
}

.auto-style3 {
    max-width: 100%;
}

@media only screen and (max-width: 799px) {
  .main {
    width: 100%;
  }
  .auto-style3 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="text.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="main">

    <div class="auto-style3" style="height: auto; width: 1200px">
      <h3 class="onama2"><b>O nama</b></h3>
      <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji. Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b></h4>


    </div>

  </div>

</body>

</html>