Div Not Taking Up Full Space

Question

The Problem

I'm having an issue where a max-width is being set on my div from somewhere but I'm not sure where it is as I have checked the styling package that I'm using (Semantic UI) as well as my own internal styles and I am not able to find the place where it is derived from (As shown in image 1, it is in a style tag, but that is only the compiled Semantic UI code as seen in image 2). (Image 1)

(Image 2)

Because of the issue shown, this is what shows inside of the app

Expected Behavior

This is what the expected behavior is: (It takes up the whole space instead of being restricted)

Code

App.css

html,
body,
.app {
  height: 100vh;
  background: #eee;
  padding: 1em;
}

/* SidePanel.js */
.menu {
  padding-bottom: 2em;
}

/* Messages.js */
.messages {
  height: 70vh;
  overflow-y: scroll;
}

/* MessageForm.js */
.message__form {
  position: fixed !important;
  bottom: 1em;
  margin-left: 320px !important;
  left: 0;
  right: 1em;
  z-index: 200;
}

.emoijpicker {
  position: absolute;
}

/* Message.js */
.message__self {
  border-left: 2px solid orange;
  padding-left: 8px;
}

.message__image {
  padding: 1em;
}

Messages.js (Some parts not included due to relevancy)

import { Segment, Comment } from "semantic-ui-react";
...

  render() {
    // prettier-ignore
    const { messagesRef, messages, channel, user, numUniqueUsers, searchTerm, searchResults, searchLoading, privateChannel, isChannelStarred, typingUsers, messagesLoading } = this.state;

    return (
      <React.Fragment>
        <MessagesHeader
          channelName={this.displayChannelName(channel)}
          numUniqueUsers={numUniqueUsers}
          handleSearchChange={this.handleSearchChange}
          searchLoading={searchLoading}
          isPrivateChannel={privateChannel}
          handleStar={this.handleStar}
          isChannelStarred={isChannelStarred}
        />

        <Segment>
          <Comment.Group className="messages">
            {this.displayMessageSkeleton(messagesLoading)}
            {searchTerm
              ? this.displayMessages(searchResults)
              : this.displayMessages(messages)}
            {this.displayTypingUsers(typingUsers)}
            <div ref={node => (this.messagesEnd = node)} />
          </Comment.Group>
        </Segment>

        <MessageForm
          messagesRef={messagesRef}
          currentChannel={channel}
          currentUser={user}
          isPrivateChannel={privateChannel}
          getMessagesRef={this.getMessagesRef}
        />
      </React.Fragment>
    );
  }
}

export default connect(
  null,
  { setUserPosts }
)(Messages);

Answer 1

As godfather suggested in the comments, I tried an override on the .ui class and I got the expected behavior with this addition to the App.css file:

App.css

...
.ui {
  max-width: 100% !important;
}
...