How do I change the size of 2 <td>s in my table?

Hi, i’ve started learning HTML and CSS this week. Along side the course on here im trying a little project to make a football scores page. I want to give the 2 yellow s in the middle columns slightly more width but i’ve got stuck. I did it with padding but then i couldn’t change their color. Any feedback would be nice please.

HTML

<table>
   <th colspan="4">
     <h1>Premier League Scores</h1>
   </th>
   <tr>
     <td class="home">West Hame United</td>
     <td class="score">1</td>
     <td class="score">1</td>
     <td class="away">Chelsea</td>
   </tr>
     <tr>
     <td class="home">Arsenal</td>
     <td class="score">1</td>
     <td class="score">1</td>
     <td class="away">Brentford</td>
   </tr>
     <tr>
     <td class="home">Crystal Palace</td>
     <td class="score">1</td>
     <td class="score">1</td>
     <td class="away">Bright & Hove Albion</td>
   </tr>
     <tr>
     <td class="home">Fulham</td>
     <td class="score">2</td>
     <td class="score">0</td>
     <td class="away">Nottingham Forest</td>
   </tr>
     <tr>
     <td class="home">Leicester City</td>
     <td class="score">4</td>
     <td class="score">1</td>
     <td class="away">Tottenham Hotspur</td>
   </tr>
     <tr>
     <td class="home">Southampton</td>
     <td class="score">1</td>
     <td class="score">2</td>
     <td class="away">Wolverampton Wanderers</td>
   </tr>
     <tr>
     <td class="home">AFC Bournemouth</td>
     <td class="score">1</td>
     <td class="score">1</td>
     <td class="away">Newcastle United</td>
   </tr>
     <tr>
     <td class="home">Leeds United</td>
     <td class="score">0</td>
     <td class="score">2</td>
     <td class="away">Manchester United</td>
   </tr>
     <tr>
     <td class="home">Manchester City</td>
     <td class="score">3</td>
     <td class="score">1</td>
     <td class="away">Aston Villa</td>
   </tr>
     <tr>
     <td class="home">Liverpool</td>
     <td class="score">2</td>
     <td class="score">0</td>
     <td class="away">Everton</td>
   </tr>
 </table>

CSS

table {
margin: auto;
border: 1px solid black;
font-family: Tahoma;
}

th {
  border: 1px solid black;
}

td {
  border: 1px solid black;
} 

.home {
  text-align: right;
  padding-right: 50px;
  width: 50%;
  font-weight: bold;
}

.away {
  text-align: left;
  padding-left: 50px;
  width: 50%;
  font-weight: bold;
}

.score {
  background-color: yellow;
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.