I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet:
import React from 'react'
import './tweetpage.css'
import Navbar from './navbar.js'
function Tweetpage() {
return (
<div className="tweetpage_____div">
<Navbar />
<div className="tweetpage____tweetit">
<h1>Home</h1>
<input placeholder="What's happening?" />
<button>Tweet</button>
</div>
<div>
<input placeholder="search" />
</div>
</div>
)
}
export default Tweetpage
The CSS styling being applied is as follows:
.tweetpage_____div {
display: flex;
}
.tweetpage_____leftsection {
display: flex;
flex-direction: column;
}
.twitterlogo____tweetpage {
width: 28px;
}
.tweetpage_____div > div {
margin-left: 250px;
}
.tweetpage____tweetit {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
Here's the HTML structure for reference:
<div class="tweetpage_____div">
<nav>Navbar</nav>
<div class="tweetpage____tweetit">
<h1>Home</h1>
<input placeholder="What's happening?" />
<button>Tweet</button>
</div>
<div>
<input placeholder="search" />
</div>
</div>