Help with aligning search box Options

[Night Shift]

Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE

.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}

[Cassie Bratt]

Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE

.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}

Hello,

Thank you for providing the CSS code. Based on what you’ve shared, it looks like you’re using flex to display the form. To align the search box to the left, you can use the justify-content property and set it to flex-start. This will align the flex items (in this case, the search box) to the start of the container.

Here’s how you can modify your CSS:

CODE

.whmpress_domain_search_ajax form {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  font-size: 16px;
  max-width: 980px;
  margin-left: 0px;
  margin-right: 0px;
}

Try adding justify-content: flex-start; to your .whmpress_domain_search_ajax form CSS rule and see if that moves the search box to the left as desired.

I hope the solution may help you.

[Cassie Bratt]

Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE

.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}

Hello, MaryKayInTouch

Thank you for providing the CSS code. Based on what you’ve shared, it looks like you’re using flex to display the form. To align the search box to the left, you can use the justify-content property and set it to flex-start. This will align the flex items (in this case, the search box) to the start of the container.

Here’s how you can modify your CSS:

CODE

.whmpress_domain_search_ajax form {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  font-size: 16px;
  max-width: 980px;
  margin-left: 0px;
  margin-right: 0px;
}

Try adding justify-content: flex-start; to your .whmpress_domain_search_ajax form CSS rule and see if that moves the search box to the left as desired.

I hope the solution may help you.

Hello,

Did you tried this solution? Is it helpful or not? Once try this and let me know.