Roman Numeral Converter - General CSS Questions

I’ve completed the Roman Numeral Converter project. I’m trying to get the styling up to an acceptable standard and have some general questions about centering.

I know of “text-align” for the text. But how do I do the same thing with the logo, input box and button? I’ve used margin-left, but there has to be a better way.

And what about the Cyan box? I’m thinking i would have to use Flex Box, but I just need a clue or two on how to get started.

body {
  background-color: black;

img {
  width: 100%;
  max-width: 250px;
  margin-left: 260px;

.title {
  color: white;
  text-align: center;

#number {
  margin-top: 20px;
  margin-left: 280px;

#convert-btn {
  margin-top: 20px;
  margin-left: 335px;
  margin-bottom: 20px;

.box {
  border-radius: 10px;
  background-color: cyan;
  width: 75%

#output {
  color: white;
  text-align: center;

Hello Troy.
First, identify the containers of the elements you want to centre, then use justify-content and align-content to centre the containers. Justify-content will centre your containers horizontally and align-items will center your containers vertically.

But I can see everything is centred already. You’ll have to reduce the width for proper centring for the Cyan box.
Can you provide your HTML code so that I can work out the solution on my end? It’s easier as compared to working without the code.

thanks for helping Stephen.

Here is the full code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Roman Numeral Converter</title>
    <link rel="stylesheet" href="styles.css" />
    <img src="">
    <h1 class="title">Roman Numeral Converter</h1>
    <div class="box">
    <input id="number"></input></br>
    <button id="convert-btn">Convert</button>
    <div id="output"></div>
    <script src="./script.js"></script>

Here is the corrected version of your code. Go through it, and let me know if you need clarity on something. You can adjust the box width to fit your desired dimensions.

that link doesnt open. I tried registering and it still doesnt work.

this is all that happens:

the simplest way to horizontally center an element with a defined width would be to set the left and right margins both to auto. The remaining space will be split equally between them.

I always run into this problem when I try to use CodePen. Let me do it we replit instead. Just a minute.


Let me know if I’ve solved your problem.