Problems on my Media-Queries Positioning for Hover Buttons

Question

I finished my coding for all Smartphone Devices and now I started on the Tablets but soon on this Mission I have a problem because im not sure how to fix this.

This is how my "Section Skills" looks like for mobile: My section on mobile

On tablet i want 3 in each row and not 2 but Im not able to make this and dont know why.

.Skills{
	background-color:#262626;	
	padding-bottom: 40px;
}


.Skills p:nth-child(1){
	padding-top: 54px;
	padding-left: 50px;
	font-size:30px;
	font-weight:900;
	letter-spacing: 15px;
	color:#fff;
}

.Skills p:nth-child(2){
	padding-top: 4px;
	padding-left: 50px;
	font-size:30px;
	font-weight:900;
	letter-spacing: 15px;
	color:#fff;
}

.Skills p:nth-child(3){
	padding-top: 7px;
	padding-left: 50px;
	font-size:15px;
	font-weight:400;
	color:#fff;
}

.Skills img:nth-child(4){
	padding-top: 7px;
	padding-left: 51px;
}

section {
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
 	justify-content: space-between;
}

.Programme {
	text-align:center;
	color:#ffffff;
    padding: 20px 0 0 49px;

}

section .Programme:nth-child(2),section .Programme:nth-child(4),section .Programme:nth-child(6),section .Programme:nth-child(8) {
    padding: 20px 49px 0 0;
}

.Programme img {
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
	transition: filter 1s ease;
    transition : -webkit-filter 1000ms linear;
    width: 102px;
}

.Programme img:hover {
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: filter 1s ease;
    transition : -webkit-filter 1000ms linear
}

h3{
	margin: 5px 0 0 0;
    font-size: 14px;
	font-weight:700;
}

h4 {
	margin: 5px 0 0 0;
    font-size: 12px;
	font-weight: 300;
}

<article class="Skills">
        <p>MEINE</p>
        <p>SKILLS</p>
        <p>DAS IST MEIN KÖNNEN</p>
        <img src="images/Strich_320.jpg" alt=""/>

        <section>

            <div class="Programme">
                <img src="images/Photoshop.png"/>
                <h3>PHOTOSHOP</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/Illustrator.png"/>
                <h3>ILLUSTRATOR</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/InDesign.png"/>
                <h3>INDESIGN</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/Dreamweaver.png"/>
                <h3>DREAMWEAVER</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/AfterEffects.png"/>
                <h3>AFTEREFFECTS</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/PremierePro.png"/>
                <h3>PREMIERE PRO</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/SonyVegas.png"/>
                <h3>SONY VEGAS</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>

            <div class="Programme">
                <img src="images/Cinema4D.png"/>
                <h3>CINEMA4D</h3>
                <h4>Experte, 5 Jahre</h4>
            </div>
        </section>
    </article>

Answer 1

It's difficult to tell, but it sounds very much like one of the parent containers (either the section or the article) is too narrow and that once the horizontal padding is factored in, the .programme divs are too wide to fit 3 in a row.

Try:

.programme {
max-width: 20%;
}