This is a really low effort question, as it shows you didn’t do your research on the question at all.

A very basic concept of CSS is the Cascade, it’s literally right in the name.

This means that rules defined lower in the document overwrite rules earlier in the document.

Instead of using !important, which is very bad practice, simply move the @media rule all the way down your document so it doesn’t get overridden.

Ahh I see the problem here.

The way that the code is translated in any programming language is from left to right and downwards.

so instead of using !important to avoid overriding the line(s) of code(s) and/or functions. Simply move the @media to the bottom. That way the @media will be the last function/line to be translated and wont get overridden by the the lines/functions/codes before it.

CSS doesn’t work on other codes (width, etc.) unless !important is used, but other codes work. Why is that/what is the cause? And are there any solution besides using !important?

I have used @media on other pixels but it is working fine on all the codes except this one.

Width doesn’t change in a media query rest of the properties change.

        @media screen and (min-width= 1200px) and (max-width= 1440px)
    .slideshow
     {
    width: 50% !important;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    .slides
    {
    width: 300%;
    height: auto;
    display: flex;
    }
    .slide
    {
    width: 20%;
    transition: 0.6s;
    }
     .slide img
    {
    width: 50%;
    height: auto;
    border: 5px solid maroon;
    }
     .about
    {
    position: absolute;
    top: 50px;
    width: 500px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    font-family: arial;
    color: black;
    }
    .about h2
    {
    padding: 10px 30px 10px;
    }
    .about p
    {
    padding: 10px 30px 20px;
    text-align: justify;
    }
    .about p i
    {
    opacity: 50%;
    font-size: 22px;
    }
    .content
    {
    position: absolute;
    z-index: -1;
    top: 110px;
    right: 2px;
    width: 280px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    font-family: arial;
    }
    .content h2
    {
    padding: 10px 30px 10px;
    }
    .content p
    {
    padding: 10px 30px 20px;
    text-align: justify;
    }
    }