微信小程序 WXML调用WXSS 错误！

香喷喷的咸鱼

WXML的代码

<!--index.wxml-->

<view class="container">
    <text class="text_style">树莓派客户端</text>
<button  class="con_style" type="primary" bindtap="connectPi">连接</button> 
<!-- {{}}是微信小程序的一种语法，里面可以引用变量，因此把原来写死的文字做成变量方便后面改动，因为后面有可能需要点击了开灯按钮，文字信息会变成”关红灯” -->
    <button  class="red_style"  bindtap="redControl">{{redLed}}</button> 
    <button  class="green_style"  bindtap="greenControl">{{greenLed}}</button> 
    <button  class="blue_style"  bindtap="blueControl">{{blueLed}}</button> 
    <button  class="beep_style"  bindtap="beepControl">{{beep}}</button> 
</view>

WXSS的代码

/**index.wxss**/
/*pages/index/index.wxss */
.text_style{
  color:green;
  font-size:100rpx
}

.con_style{
  width: 210rpx;
  height: 210rpx;
  line-height:210rpx; 
  opacity:unset;
  text-align:center;/*为了文字左对齐*/
  padding: 0rpx;/*为了文字左对齐*/
  border-radius: 50%;
  margin-top: 100rpx;
  font-size:60rpx
}


.red_style{
  width:160rpx;  /*宽高一样，因为要做成圆形 */
  height:160rpx;
  margin-left: 60rpx;
  margin-top: -100rpx;
  border-radius: 50%;/*弧度,50%就是圆形了，50~100%之间观察不出来*/
  background-color: red;
  opacity: 1;/*透明度，打开后为1，关闭时0.3,一定要设置，背景色才可以露出来*/
  line-height:160rpx;/*字体行高与按钮相等，目的是让字体居中*/
  padding: 0rpx;/*为了让字体居中*/
  color:white;/*字体颜色*/
}
.green_style{
  width:160rpx;
  height:160rpx;
  margin-left: 200rpx;
  margin-top: -20rpx;
  border-radius: 50%;
  background-color: green;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}
.blue_style{
  width:160rpx;
  height:160rpx;
  margin-left: 400rpx;
  margin-top: -150rpx;
  border-radius: 50%;
  background-color: blue;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}
.beep_style{
  width:160rpx;
  height:160rpx;
  margin-left: 530rpx;
  margin-top: -330rpx;
  border-radius: 50%;
  background-color: black;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}

不知道为什么  我的盒子模型的margin显示错误 ，但是其它的倒是正确。
我不知道是软件的BUG还是  其它地方没有设计好。
希望万能的鱼油 帮我看看！
感激不尽

genius_7321

container 没有定义样式？是不是得来个flex