Comment rendre une page Web identique sur différents écrans?

Question

J'ai un webpage fait par moi. Il y a peu de contenus qui sont différents sur différents écrans (ex: mac et windows). Lorsque j'essaie d'ouvrir la même page Web sur mon ordinateur portable DELL (Windows 10), il y a peu de choses qui semblent différentes sur un autre ordinateur de taille d'écran.

Sur un autre ordinateur de taille d'écran; la section des boîtes, le "Voir plus" texte et le "ventes" texte ressemble actuellement à ce (qui n'est pas que je veux):

"Voir plus" texte

« Sales "text

section Boîtes:

Et le même lien, quand je suis en train d'ouvrir sur mon bureau qui a un plus grand écran, il est à la recherche de cette façon (ce qui est je veux):

section Boîtes:

"Voir plus" texte:

texte "Sales":

Je me demande, quels changements dois-je faire dans mon CSS de sorte qu'il semble même sur des écrans différents.

Le code CSS que je me sers pour les boîtes sont:

.company-heads { 
    margin-left: 300px; 
    padding-top: 80px; 
    font-style: italic; 
    margin-right: 289px 
} 

.company-heads .rectangle { 
    border-radius: 10px; 
    display: inline-block; 
    margin-bottom: 30px; 
    margin-right: 22px; 
    width: 355px; 
    height: 100px; 
    border: 1px solid #000; 
    background-color: white; 
    padding: 10px 10px 10px 100px; 
    position: relative; 
} 

.company-heads .rectangle .circle { 
    background: #aaa; 
    border-radius: 100%; 
    height: 60px; 
    width: 60px; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

Answer 1

Vous pouvez le faire en donnant le conteneur parent, .company-heads, dans ce cas, un maximum de largeur! On dirait, .company-heads { max-width: 1140px; } fera le travail. Faites-moi savoir si cela ne résout pas votre problème!