How to get text to fill its container horizontally?

Hi, I am struggling to find a way to make this text fill the width of its container so it is in line with the nav-bar, could anyone help with the syntax if possible, please?

Thanks

Can you please paste your code?

It could be the padding property, but if I took a guess I think it is because of the font-size

I don’t think the text in its current size can line up perfectly. Since the word “Developer” doesn’t fit in the top line it has to be on a second line, and without it the top line doesn’t fill up the space in the top line. You could try using the letter-spacing , or word-spacing properties if you don’t want to change your font-size.

Hopefully this is helpful, happy coding :grinning:

Hi, unfortunately it’s not the font size, I did play around with this. Code is below, thanks:

body {
    background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
    background-size: cover;
    background-position: center;
    font-family: 'Montserrat', sans-serif;
    color: white;
    
}

html {
    height: 100%;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}

#content {
    text-align: center;
    padding-top: 25%;
    text-shadow: 0px 4px 3px rgba(0,0,0,.3),
                 0px 8px 10px rgba(0,0,0,.1),
                 0px 10px 16px rgba(0,0,0,.1);
}

h1 {
    font-weight: 700;
    font-size: 5em;
    width: auto;
}



hr {
    width: 960px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

And the HTML:

<!doctype html>
<html lang="en">

<head>
    <title>Jared Monkman | Web Developer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="./resources/images/JM PNG Black.png" type="image/icon type">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/944384f346.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./resources/css/index.css">

</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="./resources/images/JM PNG.png" alt="Logo" style="width:40px;">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active"><a class="nav-link" href="#">Home <span
                                class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" id>
                    <li><i class="fab fa-linkedin" id="linkedin"></i></li>
                    <li><i class="fab fa-github-square"></i></li>
                </ul>


            </div>
        </div>
    </nav>


    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="content">
                    <h1>Aspiring Full-stack Web Developer </h1>
                    <h3>Producing high quality websites and exceptional user experience</h3>
                    <hr>
                    <button class="btn-default btn-lg"> <i class="fas fa-briefcase"></i> View my work!</button>
                </div>

            </div>
        </div>
    </div>











    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Let me make sure I understand what you are trying to do.
If I understand correctly, you want the <h1> element to go from one edge of the blue rectangle in your picture to the other edge.

If this is the case than I don’t think it is possible given the size of the text, since the space taken up by one line is too much, and the space taken up by two lines is too little.

Did you try changing the space between words? You might be able to push the words closer to the edges this way.

One more question. If you resize your browser can you get it to line up correctly?