body { font-family: Arial, sans-serif; margin: 0; height: 100vh; width: 100%; /* add unit */ display: flex; justify-content: center; align-items: center; background: #fff; color: #000; } .container { width: 400px; /* unified width */ border: 1px solid black; /* visible box */ padding: 10px; /* some padding inside */ word-wrap: break-word; /* for older browsers */ overflow-wrap: break-word; /* modern way to break words */ word-break: break-word; /* break long words */ white-space: normal; /* normal wrapping */ box-sizing: border-box; /* include padding/border in width */ } .navbar { display: flex; justify-content: space-between; width: 400px; border-bottom: 1px solid black; margin-bottom: 10px; box-sizing: border-box; } .wrapper { text-align: center; } .top-row { display: flex; justify-content: space-between; width: 400px; margin: 0 auto; font-size: 20px; margin-bottom: 8px; box-sizing: border-box; } .line { width: 400px; height: 2px; background: black; margin: 0 auto 10px auto; box-sizing: border-box; } p { font-size: 20px; width: 400px; /* add px unit */ line-height: 1; /* better line height */ text-align: left; white-space: normal; /* allow wrapping */ word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; margin: 0; /* remove default margins */ box-sizing: border-box; }

/* MOBILE SUPPORT */
@media (max-width: 480px) {
    .container,
    .navbar,
    .top-row,
    .line,
    p {
        width: 100%;          /* make full width on small screens */
    }

    .top-row {
        flex-direction: column; /* stack items vertically if needed */
        align-items: flex-start;
    }

    p {
        font-size: 16px;      /* smaller font for mobile */
    }
}