How to center CSS responsive Box-Sizing

[DJ Carl]

Hello Folks,

Trying to center the BOX for Metro Pro theme sidebar and mobile [responsive]. If you look real closely, it is more to the left...

.update {
  width: 315px;
  border: 1px solid #4169E1;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  background-color: #DCDCDC;
}

`<div class="update"><center><span style="color: #080000; font-family: verdana,arial; font-size: 20px;">DJ SERVICE BENEFITS:</span></center><span style="color: #000000; font-family: verdana,arial; font-size: 14px;">Wouldn't it be fun if you could experience a music expert DJ emcee who (1) <a title="Buy a customized DJ MIX now" href="http://bit.ly/2A5Fkkb" target="_blank">mixes music</a> for all races, ages, and backgrounds, (3) <a title="Hear DJ Carl discuss the business services" href="https://media.blubrry.com/hip_hop_music_celebrity/djcarl.com/audio/voiceover-emcee-hosting-services.mp3" target="_blank">speaks professionally</a> on the microphone, and can (3) oversee your event with precise attention to details? You can trust DJ Carl©.</span><p></p>
<center><span style="color: #080000; font-family: verdana,arial; font-size: 20px;">PODCAST DJ MIXES:</span></center><span style="color: #000000; font-family: verdana,arial; font-size: 14px;">Listen and stream <span style="color: #DC143C; font-family: verdana,arial; font-size: 13px;">NEW</span> <a title="Hip Hop Music 2020 Podcast" href="https://djcarl.com/hip-hop-music-2020/" target="_blank"><strong>Hip Hop Podcast #107</strong></a> and <span style="color: #DC143C; font-family: verdana,arial; font-size: 13px;">NEW</span> <a title="Dance Music 2020 Podcast" href="https://djcarl.com/dance-music-2020/" target="_blank"><strong>Dance Podcast #119</strong></a> now. Available on <a title="DJ Carl© Streaming | celebrity DJ Carl©" href="https://bit.ly/2zJSTr5" target="_blank">Apple</a>, Google, and Amazon Podcasts.</span></div>`

https://djcarl.com/

[Bianca]

Hi Carl,
What do you mean exactly? When I visit your website I see the box properly aligned. However, I do see that the text in the box is left aligned. Is this what you mean? If so addtext-align:center; to the code you mention above.
If not, can you clarify?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[DJ Carl]

Bianca,

Here is a screenshot. The BOX, not the text needs to center on mobile.

Thanks

[Bianca]

Hi Carl,
Sorry, I overlooked that it was a mobile issue. This might help to center the box.
Replace this:
margin: 10px;

with this:
margin: 10px auto;

When you add just one value it applies this for all sides top - right - bottom - left. When you add two values, the first applies vertically (top and bottom) and the second value applies horizontally (right and left). The auto value makes it align in the middle of the section. More information about this can be read here.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Author]

Posts