kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Collaboration open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Collaboration

v0.11.0 (2022-02-17)

v1.2.0

v1.10.11-rc.1

GitLab 14.0

excalidraw

v0.11.0 (2022-02-17)

flarum

v1.2.0

element-web

v1.10.11-rc.1

yjs

GitLab FOSS

GitLab 14.0

Popular Libraries in Collaboration

Trending New libraries in Collaboration

Top Authors in Collaboration

1

15 Libraries

192

2

14 Libraries

658

3

5 Libraries

797

4

4 Libraries

117

5

4 Libraries

41

6

4 Libraries

168

7

4 Libraries

2553

8

4 Libraries

124

9

4 Libraries

1528

10

4 Libraries

562

1

15 Libraries

192

2

14 Libraries

658

3

5 Libraries

797

4

4 Libraries

117

5

4 Libraries

41

6

4 Libraries

168

7

4 Libraries

2553

8

4 Libraries

124

9

4 Libraries

1528

10

4 Libraries

562

Trending Kits in Collaboration

No Trending Kits are available at this moment for Collaboration

Trending Discussions on Collaboration

    I can't get my <img> tags to center inside of my grid
    Counting repeated pairs in a list
    As seen in the image, create two responsive DIVs with space between them
    Django mod_wsgi Apache Server, ModuleNotFoundError: No Module Named Django
    How to return different format of records from a single PL/pgSQL function?
    Remove position absolute in media query
    Incorrect images path in production build - Vue.js
    Problem accessing prop to change color of button conditionally
    user table not created on django deployment but superuser created on heroku bash
    Find the categories that frequently occur together based on another column

QUESTION

I can't get my <img> tags to center inside of my grid

Asked 2022-Mar-29 at 04:59

I'm attempting to code my first website from scratch and I have found myself stuck on this problem for the last day. I am trying to center the logos for my mobile view. I have them placed correctly in my @media tag and they are displaying inside the grid however after countless tries I cannot get them to center inside of there grid columns. I do apologise if any of my code is messy.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359

I have done plenty of googling and from my understanding this shouldn't be a hard fix, I can only assume I have something overriding my code stopping me from centering my images.

ANSWER

Answered 2022-Mar-28 at 23:57

copy icondownload icon

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362

will do it.

Another option:

copy icondownload icon

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365

Note: you might not realise it, but you posted everything except the images, because they're relative, on your system. You should have replaced the src's with some random image urls or some image placeholders (e.g: https://via.placeholder.com/150)


Working example:

copy icondownload icon

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365* {
366  box-sizing: border-box;
367  margin: 0;
368  padding: 0;
369}
370
371body {
372  background-color: black;
373}
374
375.company-logos {
376  display: flex;
377  flex-wrap: wrap;
378  flex-basis: 100%;
379  padding: 2% 6%;
380  justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384  .company-logos {
385    display: grid;
386    grid-template-columns: repeat(3, 1fr);
387    gap: 1rem;
388  }
389}
390
391@media (max-width: 800px) {
392  .company-logos {
393    grid-template-columns: repeat(2, 1fr);
394  }
395}
396
397.company-logos img {
398  justify-self: center;
399}

copy icondownload icon

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="/styles.css">
8    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10    <title>Developer Portfolio</title>
11</head>
12<body>
13    <nav>
14    <div class="logo">
15        <h3>
16            <a href="/">Johnathan Specter</a>
17        </h3>
18    </div>
19        <div class="nav-list">
20            <ul>
21                <li><a href="#">Articles</a></li>
22                <li><a href="#">Chats</a></li>
23                <li><a href="#">Awards</a></li>
24                <li><a href="#">About</a></li>
25                <button class="nav-button">Get in touch</button>
26            </ul>
27        </div>
28    </nav>
29    <div class="mob-menu">
30        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31        <ul class="mobile-menu">
32            <li><a href="#">Articles</a></li>
33            <li><a href="#">Chats</a></li>
34            <li><a href="#">Awards</a></li>
35            <li><a href="#">About</a></li>
36            <li><a href="#">Get in touch</a></li>
37        </ul>
38    </div>
39    <section class="top">
40        <div class="top-container">
41            <div class="column-left">
42                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44            </div>
45        </div>
46    </section>
47    <section class="logos">
48        <div class="company-logos">
49            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55        </div>
56    </section>
57    <section>
58        <div class="previews">
59            <div class="spense">
60                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61                <h2 class="spense-heading">Spense.com</h2>
62                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63            </div>
64            <div class="yelp">
65                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66                <h2 class="yelp-heading">YelpCamp.com</h2>
67                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68            </div>
69        </div>
70    </section>
71    <section>
72        <div class="blurb">
73            <div class="blurb1">
74                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77            </div>
78            <div class="blurb2">
79                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80                <p>A quote I live by perfectly illustrates what I mean.</p>
81                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83            </div>
84        </div>
85    </section>
86    <section>
87        <div class="interested">
88            <div class="interested1">
89                <h1>Intersted in working with me?</h1>
90                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91                <button class="git-button">Get in touch</button>
92            </div>
93            <div class="interested2">
94            </div>
95        </div>
96    </section>
97</body>
98</html>
99* {
100    box-sizing: border-box;
101    margin: 0;
102    padding: 0;
103}
104
105body {
106    background-color: black;
107}
108
109nav {
110    display: flex;
111    flex-wrap: wrap;
112    padding: 2% 6%;
113    justify-content: space-between;
114    align-items: center;
115}
116
117.logo {
118    font-family: 'Prata';
119    color: #ffffff;
120    font-size: 110%;
121}
122
123.logo a {
124    text-decoration: none;
125    font-family: 'Prata';
126    color: #ffffff;
127}
128
129.logo:hover {
130    transform: scale(1.1);
131    transition: 0.3s;
132}
133
134.nav-list {
135    flex: 1;
136    text-align: center;
137}
138
139.nav-list li {
140    list-style: none;
141    display: inline-block;
142    padding: 8px 12px;
143    position: relative;
144}
145
146.nav-list li:hover {
147    transform: scale(1.1);
148    transition: 0.3s;
149}
150
151.nav-list li a {
152    color: #939495;
153    text-decoration: none;
154    font-family: 'Inter';
155}
156
157.nav-button {
158    background-color: #fbe850;
159    color: #000000;
160    float: right;
161    padding: 15px 30px;
162    font-family: 'Prata';
163}
164
165.nav-button:hover {
166    transform: scale(1.1);
167    transition: 0.3s;
168}
169
170.company-logos {
171    display: flex;
172    flex-wrap: wrap;
173    flex-basis: 100%;
174    padding: 2% 6%;
175    justify-content: space-between;
176}
177
178h1 {
179    font-family: 'Prata';
180    color: #ffffff;
181}
182
183p {
184    font-family: 'Inter';
185    color: #939495;
186}
187
188.top-container {
189    display: flex;
190    width: 50%;
191    padding: 2% 6%;
192}
193
194.sub-heading {
195    font-size: 250%;
196}
197
198.previews {
199    display: flex;
200    padding: 2% 6%;
201    gap: 1rem;
202}
203
204.previews > * {
205    flex-basis: 100%;
206}
207
208.spense-heading {
209    font-family: 'Prata';
210    color: #ffffff;
211    padding-top: 1rem;
212    padding-bottom: 1rem;
213}
214
215.spense p {
216    color: #939495;
217}
218
219.spense-img {
220    height: auto;
221    max-width: 100%;
222}
223
224.yelp-img {
225    height: auto;
226    max-width: 100%;
227}
228
229.yelp-heading {
230    font-family: 'Prata';
231    color: #ffffff;
232    padding-top: 1rem;
233    padding-bottom: 1rem;
234}
235
236.yelp p {
237    color: #939495;
238}
239
240.blurb {
241    display: flex;
242    padding: 2% 6%;
243    gap: 1rem;
244    background-color: #2e3038;
245}
246
247.blurb1 h1 {
248    margin-bottom: 1rem;
249    color: #ffffff;
250}
251
252.blurb1 p {
253    margin-bottom: 1rem;
254    color: #939495;
255}
256
257.blurb2 p {
258    margin-top: 0.5rem;
259    margin-bottom: 1rem;
260    color: #939495;
261}
262
263.interested {
264    display: flex;
265    padding: 2% 6%;
266    gap: 1rem;
267}
268
269.interested h1 {
270    margin-bottom: 1rem;
271}
272
273.interested1 p {
274    margin-bottom: 1rem;
275    margin-right: 1rem;
276}
277
278.interested1 {
279    flex-basis: 50%;
280}
281
282.git-button {
283    background-color: #fbe850;
284    color: #000000;
285    padding: 15px 30px;
286    font-family: 'Prata';
287}
288
289.git-button:hover {
290    transform: scale(1.1);
291    transition: 0.3s;
292}
293
294.hamburger-icon {
295    margin: auto 0;
296    display: none;
297    cursor: pointer;
298}
299
300.mobile-menu {
301    display: none;
302    position: absolute;
303    top: 50px;
304    left: 0;
305    height: calc(100vh - 50px);
306    width: 100%;
307}
308
309.open .mobile-menu {
310    display: flex;
311    flex-direction: column;
312    align-items: center;
313    justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317    .top-container {
318        width: 100%;
319        margin-bottom: 3rem;
320    }
321
322    .previews {
323        display: block;
324    }
325
326    .blurb {
327        display: block;
328    }
329
330    .blurb1 {
331        margin-bottom: 3rem;
332    }
333
334    .interested {
335        display: block;
336        max-width: 80%;
337    }
338}
339
340@media (max-width: 750px) {
341    .nav-list {
342        display: none;
343    }
344
345    .hamburger-icon {
346        display:inline-block
347    }
348}
349
350@media (max-width: 800px) {
351    .company-logos {
352        display: grid;
353        grid-template-columns: repeat(2, 1fr);
354        gap: 1rem;
355        align-items: center;
356        justify-content: center;
357    }
358}
359.company-logos img {
360  justify-self: center;
361}
362.company-logos img {
363  margin: 0 auto;
364}
365* {
366  box-sizing: border-box;
367  margin: 0;
368  padding: 0;
369}
370
371body {
372  background-color: black;
373}
374
375.company-logos {
376  display: flex;
377  flex-wrap: wrap;
378  flex-basis: 100%;
379  padding: 2% 6%;
380  justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384  .company-logos {
385    display: grid;
386    grid-template-columns: repeat(3, 1fr);
387    gap: 1rem;
388  }
389}
390
391@media (max-width: 800px) {
392  .company-logos {
393    grid-template-columns: repeat(2, 1fr);
394  }
395}
396
397.company-logos img {
398  justify-self: center;
399}    <section class="logos">
400        <div class="company-logos">
401            <img src="https://via.placeholder.com/150" alt="Walmart logo" class="walmart-logo">
402            <img src="https://via.placeholder.com/150" alt="JP Morgan logo">
403            <img src="https://via.placeholder.com/150" alt="Visa logo">
404            <img src="https://via.placeholder.com/150" alt="Tinder logo">
405            <img src="https://via.placeholder.com/150" alt="Samsung logo">
406            <img src="https://via.placeholder.com/150" alt="Verizon logo">
407        </div>
408    </section>

Note: I removed all code irrelevant for question being asked.

Source https://stackoverflow.com/questions/71654750