@Media Style gets canceled-CodePudding

I'm trying to set width of a Div to 95% in @media but it gets canceled by the browser. It works fine with other divs.

@media screen and (max-width: 700px) {
      .proj {
            flex-direction: column;
            align-items: center;
            border: 1px solid white;
            width: 300%
      }
      .innp {
            width: 50%;
      }
}

.proj {
      display: flex;
      justify-content: space-between;
      width: 100%
}
.innp {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30%;
      border: 1px solid white;
      overflow: hidden;
}

Here is what the browser does:

https://i.stack.imgur.com/35aJG.png

CodePudding user response：

Put @media at last. In CSS, the one appear later in the code override earlier rules

.proj {
      display: flex;
      justify-content: space-between;
      width: 100%
}
.innp {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30%;
      border: 1px solid white;
      overflow: hidden;
}
@media screen and (max-width: 700px) {
      .proj {
            flex-direction: column;
            align-items: center;
            border: 1px solid white;
            width: 300%
      }
      .innp {
            width: 50%;
      }
}

More information: What is the order of precedence for CSS?