Trying to create a hero image using reactjs and semantic ui

Question

I am trying to create a website with a hero image at the top of the page using a combination of React and Semantic UI (just what I learnt on the course I took).

This is the component:

import React from "react";
import "./App.css";

const App = () => {
    return (
        <div class='ui inverted vertical masthead center aligned segment'>
            <div class='ui text container'>
                <h1 class='ui inverted header'>My name</h1>
                <h2>My role</h2>
                <div class='ui huge primary button'>
                    Get Started <i class='right arrow icon'></i>
                </div>
            </div>
        </div>
    );
};

export default App;

And here is the CSS:

.ui.masthead {
    padding: 10%;
    background-image: url('../../assets/space.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover;
}

This shows the following: Small screen webpage

Which is fine but then when I expand the page I get the following:

large screen webpage with black bar on the side

How can I stop the black bar on the side? I would have thought the image would just resize to be larger to fit the page rather than show the black background colour.

I have tried to add width: 100% but get the same issue.

Answer 1

Ok, so weirdly for some reason the exact code I posted worked fine on Codepen, but wouldn't work on my local machine.

However, I've somehow managed to get it to work by adding a .segment selector to my CSS (so I'm assuming it's a styling thing with the segment causing the issue) so my CSS now looks like this:

.ui.masthead.segment {
    padding: 10%;
    background-image: url("../../assets/space.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    width: 100% !important;
}

which has it working properly.

Thanks to anyone who tried to help!