I am working on some wireframes for an app. The app has a lot of short flows that usually require filling two inputs fields or have a small FAQ as seen in the examples below. I tried looking the internet for some suggestion but nothing helps.
I`m looking for some standards or best practices.
I tried a few variations but all seem off in my opinion.
1. Aligned left small container.
2. Full width container and content
3. Full width container with center content
4. Center content
If the problem is where to align the container, why using a container?
The containers are used to arrange the information by putting a limit frame, but sometimes they are visual noise, among other reasons, for which you indirectly state in your question.
In your case there are four containers (five if there's a header):
Arranging these four related containers can be a tedious and meaningless job if the result will always be visual noise.
If you follow this very website you'll see that the left menu + container are centered, with white space around it.
On the other hand, looking at the Blender manual website you'll see the layout follows your first option (Aligned left small container). I've seen both examples in many different websites.
I'd say it will be a matter of preference, as long as you don't stretch the container too much, which will make lines more difficult to read. Your content doesn't need to stretch all the way to the edges of the screen on all screen sizes.
I'd suggest testing a few variants with some of your users to see if they have a preference.
Regardless of whether you want to test or not, I suggest you create a few variations with a variety of content, short and long texts and view them at different screen sizes to give yourself a better idea of what people will get to see. Then make a decision on what looks best overall. If that means at certain length of content it's less visually appealing, I doubt the user experience will suffer from it.
