내 미디어 쿼리에서 호버 버튼 위치 지정 문제

Question

모든 스마트 폰 장치에 대한 코딩을 마쳤으며 지금은 태블릿에서 시작했지만 곧이 임무에서이 문제를 해결할 방법을 모르므로 문제가 발생합니다.

이 내 "섹션 기술은"모바일과 같은 모습입니다 : 태블릿 My section on mobile

내가 각 행의 3이 아닌 2 만이 만들 임 수 없습니다를 원하는 이유를 잘 모릅니다.

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

 

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

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

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

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

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

 
.Programme { 
 
\t text-align:center; 
 
\t 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 { 
 
\t -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
\t transition: filter 1s ease; 
 
    transition : -webkit-filter 1000ms linear; 
 
    width: 102px; 
 
} 
 

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

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

 
h4 { 
 
\t margin: 5px 0 0 0; 
 
    font-size: 12px; 
 
\t 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

그것은 말할 어렵다하지만 (중 하나 section 또는 article)가 너무 좁고 그 수평 padding 한 번에 반영되어 매우 부모 컨테이너 중 하나 같은데, .programme divs이 너비가 너무 커서 3을 연속으로 맞출 수 없습니다.

시도 :

.programme { 
max-width: 20%; 
}